Question

我们遇到一个问题，当我们在屏幕上达到5,000点时，我们的散点图开始异常。具体来说，在5k +点，点事件＆＃39;点击＆＃39;当我们点击一个点时将停止触发，并且我们的点格式（fillColor＆amp; symbol）将丢失。

$(function() {

// Prepare the data
var data = [],
    n = 4999, // < 5K points
    i;
for (i = 0; i < n; i += 1) {
    data.push([
        Math.pow(Math.random(), 2) * 100,
        Math.pow(Math.random(), 2) * 100
    ]);
}

if (!Highcharts.Series.prototype.renderCanvas) {
    console.error('Module not loaded');
    return;
}

console.time('scatter');
console.time('asyncRender');
$('#container').highcharts({

    chart: {
        zoomType: 'xy'
    },

    xAxis: {
        min: 0,
        max: 100,
        gridLineWidth: 1
    },

    yAxis: {
        // Renders faster when we don't have to compute min and max
        min: 0,
        max: 100,
        minPadding: 0,
        maxPadding: 0
    },

    title: {
        text: 'Scatter chart with ' + Highcharts.numberFormat(data.length, 0, ' ') + ' points'
    },
    legend: {
        enabled: false
    },
    series: [{
        type: 'scatter',
        data: data,
        marker: {
            radius: 5,
            symbol: 'triangle', //shows correctly 
            fillColor: 'rgba(128,0,128,1)' //shows correctly
        },
        point: {
            events: {
                click: function() {
                    alert("click"); //event is fired correctly

                }
            }
        },
        tooltip: {
                enable: false,
            followPointer: false,
            pointFormat: '[{point.x:.1f}, {point.y:.1f}]'
        },
        events: {
            renderedCanvas: function() {
                console.timeEnd('asyncRender');
            }
        }
    }]

});
console.timeEnd('scatter');

});

5000分：http://jsfiddle.net/xrpf0pfq/10/

$(function() {

// Prepare the data
var data = [],
    n = 5000, // 5K points
    i;
for (i = 0; i < n; i += 1) {
    data.push([
        Math.pow(Math.random(), 2) * 100,
        Math.pow(Math.random(), 2) * 100
    ]);
}

if (!Highcharts.Series.prototype.renderCanvas) {
    console.error('Module not loaded');
    return;
}

console.time('scatter');
console.time('asyncRender');
$('#container').highcharts({

    chart: {
        zoomType: 'xy'
    },

    xAxis: {
        min: 0,
        max: 100,
        gridLineWidth: 1
    },

    yAxis: {
        // Renders faster when we don't have to compute min and max
        min: 0,
        max: 100,
        minPadding: 0,
        maxPadding: 0
    },

    title: {
        text: 'Scatter chart with ' + Highcharts.numberFormat(data.length, 0, ' ') + ' points'
    },
    legend: {
        enabled: false
    },
    series: [{
        type: 'scatter',
        data: data,
        marker: {
            radius: 5,
            symbol: 'triangle', //marker shape not showing 
            fillColor: 'rgba(128,0,128,1)' //color not showing
        },
        point: {
            events: {
                click: function() {
                    alert("click"); //click even not firing

                }
            }
        },
        tooltip: {
                enable: false,
            followPointer: false,
            pointFormat: '[{point.x:.1f}, {point.y:.1f}]'
        },
        events: {
            renderedCanvas: function() {
                console.timeEnd('asyncRender');
            }
        }
    }]

});
console.timeEnd('scatter');

});

当散点图上有5K或更多点时，是否有办法保持标记格式并使点击事件触发？

Answer 1

显然，此行为是由boost模块引起的。看一下没有它的例子：http://jsfiddle.net/xrpf0pfq/12/。您可以检查boostThreshold属性设置为值5000的boost模块（http://code.highcharts.com/modules/boost.src.js）的源代码。您可以自己设置boostThreshold，请查看示例：http://jsfiddle.net/xrpf0pfq/16/。

plotOptions: {
    series: {
        boostThreshold: 8001
    }
}

此外，不使用升级模块的点击事件是一个已知的问题（除此之外，点击有数千个点并且人口密集的点不是一个好主意）。但是有一个解决方法，请在GitHub上查看这个主题：https://github.com/highcharts/highcharts/issues/4569。正如Paweł所提到的，为了使点击事件与大量的点一起工作，你需要启用光环并使其可点击（这里是一个加载了boost模块的例子，其中的点比boostThreshold值多，但点击事件有效：{{3 }}）。

mouseOver: function() {
    if (this.series.halo) {
        this.series.halo.attr({'class': 'highcharts-tracker'}).toFront();
    }
}

问候。

Answer 2

遇到同样的问题。光晕解决方案对我没有用，因为我想获得最近突出显示点的点击事件，即使它没有被直接点击。如果您指向图表上的任何位置，Highcharts可以突出显示最近的点。我的解决方法是，使用工具提示格式化程序来存储x值，然后在图表的全局点击事件中使用它。

见小提琴：

http://jsfiddle.net/StefanJelner/a1m0wuy6/

var recent = false;
$('#container').highcharts({
    chart: {
        events: {
            click: function() {
            console.log('chart click', recent);
          }
        }
    },
    tooltip: {
        formatter: function() {
            recent = this.x;
            return 'The value for <b>' + this.x +
            '</b> is <b>' + this.y + '</b>';
        }
    },
    plotOptions: {
        series: {
            point: {
                events: {
                    click: function (e) {
                        console.log('point click', e); // never happens
                    }
                }
            }
        }
    }
});

这也适用于第6版。

Highcharts：如何保持标记格式并使用5K +点散点图激活点击事件？

2 个答案: