Javascript Highcharts：如何保持标记格式，并使用5K+；点散点图？

我们遇到了这样一个问题：当我们在屏幕上达到5000点时，散点图开始异常工作。具体地说，在5k+点上，当我们单击一个点时，点事件“click”将停止触发，点格式（fillColor&symbol）将丢失

4999分：

$（函数（）{
//准备数据
var数据=[]，
n=4999，//<5K点
我
对于（i=0；i

5000分：

$（函数（）{
//准备数据
var数据=[]，
n=5000，//5K点
我
对于（i=0；i

---

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

显然，这种行为是由升压模块引起的。请看没有它的示例：。您可以在boost模块（）的源代码中检查boostThreshold属性是否设置为值5000。您可以自己设置boostThreshold，请查看示例：

此外，与boost模块不工作的点击事件是一个已知的问题（此外，在有数千个点击事件且其人口稠密的地方进行点击不是一个好主意）。不过，有一个解决方法，请查看GitHub上的这个主题：。正如Paweł所提到的，要使点击事件与大量的点一起工作，您需要启用halo并使其可点击（下面是一个加载了boost模块且点数超过boostThreshold值但点击事件工作的示例：）

---

问候。

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

看小提琴：

var-recent=false；
$（“#容器”）。高图({
图表：{
活动：{
单击：函数（）{
console.log（'图表点击'，最近）；
}
}
},
工具提示：{
格式化程序：函数（）{
最近的=这个.x；
返回“+this.x”的“值”+
'is'+this.y+'；
}
},
打印选项：{
系列：{
要点：{
活动：{
点击：功能（e）{
console.log（'pointclick'，e）；//永远不会发生
}
}
}
}
}
});

---

这也适用于版本6。

您可以使用fusionCharts尝试ZoomCatter图表。您可以轻松地渲染5k+数据，保持单击功能完好无损。默认情况下选中此选项，它应该可以正常工作。看看这里的例子，有5000点和相同的点击事件：讽刺的是，增压模块似乎导致了

$(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');

});

$(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');

});

plotOptions: {
    series: {
        boostThreshold: 8001
    }
}

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

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
                    }
                }
            }
        }
    }
});