Highcharts - ухудшенная производительность рендеринга всплывающей подсказки

Question

Я использую Highcharts в приложении Angular 8, и хотя сама диаграмма отображается довольно быстро, я сталкиваюсь с некоторыми сильно ухудшенными всплывающими подсказками по производительности на диаграммах, привязанных к большим наборам данных. Интересно, что проблема, по-видимому, связана не столько с количеством точек данных, сколько с объемом заполнения ряда областей графика.

Мы используем 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, которое иллюстрирует поведение, которое яЯ вижу три разных плотности данных.

Спасибо за вашу помощь!

производительность всплывающей подсказки

Answer 1

Производительность должна быть лучше при отключении общей всплывающей подсказки:

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

Демонстрация:

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