firechart

Question

亲爱的程序员，您好

我在firefox浏览器中使用highcharts（）时遇到了性能问题（firefox quantum 60.0（64-Bit））。我有一个图表，其中包含不同类型的系列（区域，样条曲线等），其中每个系列可能包含数千个数据点（x，y）。我在jsfiddle（下面链接）中重建了一个图表，它模拟了我显示的图表。

如果我在firefox中运行jsfiddle，浏览器基本上会关闭。它落后于渲染，任何工具提示的显示最多都很慢 如果我在谷歌浏览器（版本66.0.3359.139（64位））中运行相同的jsfiddle，一切都按预期工作，无滞后。

创建图表所花费的时间差别不大，如果有的话，chrome甚至需要更长的时间：
chrome：https://i.imgur.com/dNW47UK.png
firefox：https://i.imgur.com/el9enCL.png

不幸的是，这不是减少图表中显示的点数或工具提示量的选项，因为这是一个需求的功能。该图表也必须在firefox中正常运行。 jsfiddle代码包含我的图表所需的最少功能。我使用了boost模块，我已经尝试更改相关参数，例如boostthreshhold，turbothreshhold，useGPUTranslations或usePreAllocated。

英语不是我的母语。请原谅有关语法或词汇的任何错误。这也是我在stackoverflow上的第一篇文章。如果有任何不符合格式指南，我很抱歉。

JSFiddle-Link：https://jsfiddle.net/pjwpujs0/1/

JavaScript代码：

function getAreaData(amountOfValues) {
    var arr = [];
    var i;
    // 10 minutes
    var timeinterval = 10 * 60 * 1000;
    // start time: 2016-02-12 10:00:00
    var starttime = 1455271200000;
    var temptime = starttime;
    for (i = 0; i < amountOfValues; i = i + 1) {
         temptime += timeinterval;
         arr.push([
            temptime,
            Math.random() * Math.floor(4000)
         ]);
    }
    return arr;
}

function getLineData(amountOfValues) {
    var arr = [];
    var i;
    // 10 minutes
    var timeinterval = 10 * 60 * 1000;
    // start time: 2016-02-12 10:00:00
    var starttime = 1455271200000;
    var temptime = starttime;
    for (i = 0; i < amountOfValues; i = i + 1) {
        temptime += timeinterval;
        arr.push([
            temptime,
            Math.random() * Math.floor(20)
        ]);
    }
    return arr;
}

var amount = 20000;
var series = [];
series.push({
  name: "Area",
  data: getAreaData(amount),
  lineWidth: 0.5,
  type: 'area',
  tooltip: {
    followPointer: false,
    valueSuffix: 'kW'
  }
});

series.push({
  name: "Line",
  data: getLineData(amount),
  lineWidth: 0.5,
  type: 'spline',
  yAxis: 1,
  tooltip: {
    followPointer: false,
    valueSuffix: 'm/s'
  }
});

console.time('testchart');
this.testChart = new Highcharts.Chart({
    boost: {
    allowForce: true,
    enabled: true,
    useGPUTranslations: true,
    debug: {
            showSkipSummary: true,
            timeBufferCopy: true,
            timeKDTree: true,
            timeRendering: true,
            timeSeriesProcessing: true,
            timeSetup: true
    }
  },

  chart: {
    renderTo: 'container',
    type: 'area',
    zoomType: 'x'
  },

  title: {
    text: "testchart"
  },

  xAxis: {
    type: 'datetime'
  },

  yAxis: [{
        // primary axis
        labels: {
            format: '{value}kW'
        },
        title: {
            text: "Leistung in [kW]"
        }
    }, { 
        //secondary axis
        labels: {
            format: '{value}m/s' 
        },
        title: {
            text: "Windgeschwindigkeit in [m/s]"
        },
        opposite: true
  }],

  tooltip: {
    shared: true,
    valueDecimals: 2
  },

  plotOptions: {
            series: {
                animation: false,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 1
                }
            }
        },

    series: series
});
console.timeEnd('testchart');

Edit1：我只是尝试将图形导出为svg并收到错误：
＆＃34; 413请求实体太大＆＃34;
也许这有帮助