Highcharts - 工具提示渲染性能下降

Question

我在 Angular 8 应用程序中使用 Highcharts，虽然图表本身的渲染速度非常快，但在绑定到更大数据集的图表上，我遇到了一些严重降低的性能渲染工具提示。有趣的是，这个问题似乎与数据点的数量关系不大，而与绘图区域系列填充的数量有关。

我们正在使用 Boost（在 app.module.ts 中）：

Boost(Highcharts);
NoData(Highcharts);
More(Highcharts);
NoData(Highcharts);
theme(Highcharts);

这是图表的配置（系列是动态添加的）：

public baseChartOptions: Highcharts.Options = {
chart: {
  type: 'line',
  zoomType: 'x',
  animation: false,
  height: '55%'
},
boost: {
  enabled: true,
  useGPUTranslations: true,
  usePreallocated: true
},
legend: {
  enabled: true,
  align: 'center',
  verticalAlign: 'bottom',
  layout: 'horizontal'
},
exporting: { enabled: false },
plotOptions: {
  series: {
    lineWidth: 1.5,
    animation: false,
    marker: {
      enabled: false
    }
  }
},
xAxis: [
  {
    type: 'datetime',
    dateTimeLabelFormats: {
      day: '%m/%d'
    }
  } as Highcharts.XAxisOptions
],
yAxis: [
  {
    minorTickLength: 0,
    tickLength: 0,
    title: {
      text: ''
    }
  }
],
tooltip: {
  shared: true,
  pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y:.0f}</b><br/>',
  animation: false
},
series: []

};

在呈现工具提示时确保最佳性能的最佳做法是什么？我已经看到 Highcharts 演示显示超过 1,000,000 点且性能良好，但我似乎无法达到同样的效果。

我包含了一个转换为 gif 的短视频，它说明了我在三种不同数据密度下看到的行为。

感谢您的帮助！

highcharts tooltip performance

Answer 1

禁用共享工具提示后性能应该会更好：

  tooltip: {
    animation: false,
    valueDecimals: 2,
    shared: false
  }

演示：

• http://jsfiddle.net/BlackLabel/xhpqedrt/1/