Question

我在页面上使用带有React的官方Highcharts来显示不同的度量。除了IE11（一切正常）以外，其他所有功能都正常运行，IE11在特定情况下会使浏览器崩溃。

在该页面上，用户可以查看每日，每周，每月等的度量。然后，这些选项卡中的每个选项卡都会向Highcharts渲染所选时间的数据。即使在IE11中，它也可以正常工作，直到用户选中“每月”选项卡并以小时视图查看图形（“每月”的标准视图是每日图表栏）。

在“每月”->“每小时”视图中，呼叫将响应一个大约有700个数组的对象。我做了一个测试，在其中删除了针对特定情况的响应，以使其仅显示50个条目=仍然有点慢，但并没有冻结我。

我一直在研究这个问题，因为它也很符合我的问题，但是没有运气： https://github.com/highcharts/highcharts/issues/7725

此外，一直在试图找出如何为此提供提琴的方法，但是该项目相当大，很难挑选零碎的东西。

所以这基本上只是大声喊叫，看看是否有人有其他想法。这在Chrome，Firefox等中完美运行。我认为这可能与所设置的类别数量有关，就像上面的Github问题所说的那样。而且，我已经尝试过但没有运气（或者我做错了）。我将提供针对Highcharts的一组选项：

 const options = {
  chart: {
    marginTop: 40,
    animation: false,
  },
  title: {
    text: ''
  },
  legend: {
    enabled: this.state.resolutionType !== 'allyears',
    reversed: true,
    floating: true,
    padding: 0,
    x: 50,
    align: 'left',
    verticalAlign: 'top',
    itemDistance: 5,
    symbolRadius: 0,
    symbolPadding: 2,
  },
  series: [{
    type: this.state.graphType,
    showInLegend: false,
    data: this.state.newData,
    tooltip: {
      valueSuffix: ' :-'
    }
  },
  {
    type: this.state.graphType,
    name: 'Historical',
    visible: this.state.activeHistoricalData || this.state.activePreviousData,
    showInLegend: false,
    data: this.state.historicalData,
    tooltip: {
      valueSuffix: ' :-'
    }
  },
  {
    type: 'spline',
    name: this.props.latestConsumptionContent('shortTemperature'),
    visible: this.state.activeTemperature,
    showInLegend: false,
    showEmpty: false,
    data: this.state.newTemp,
    yAxis: 1,
    tooltip: {
      valueSuffix: ' .'
    }
  }],
  plotOptions: {
    series: {
      maxPointWidth: 40,
      connectNulls: true,
      events: {
        click: event => this.handleChartPointClick(event.point.time)
      },
    },
    column: {
      marker: {
        enabled: false
      }
    },
    line: {
      marker: {
        enabled: false
      }
    },
    area: {
      fillOpacity: 0.3,
      marker: {
        enabled: true,
        symbol: 'circle'
      }
    }
  },
  xAxis: {
    categories,
    tickInterval: getTickInterval(this.state.resolutionType, this.state.periodTime),
    reversedStacks: true,
      autoRotation: false
    }
  },
  yAxis: [{
    min: 0,
    title: {
      text: ':-',
      align: 'high',
      offset: 0,
      rotation: 0,
      y: -20,
    },
    labels: {
      format: getLabelFormat(this.state.resolutionType, this.state.periodTime),
    }
  },
  {
    title: {
      text: this.props.latestConsumptionContent('shortTemperature'),
      align: 'high',
      offset: 0,
      rotation: 0,
      y: -20,
    },
    showEmpty: false,
    reversed: this.state.reverseTemperatureAxis,
    opposite: true
  }],
  credits: false
};

带有大量数据负载的Highcharts崩溃IE11

0 个答案: