1

我在页面上使用带有 React 的官方 Highcharts 来显示不同的测量值。除了 IE11（如图）之外，一切正常，它在特定情况下会使浏览器崩溃。

在页面上，用户可以查看每日、每周、每月等的测量结果。然后，每个选项卡都会呈现带有所选时间数据的 Highcharts。即使在 IE11 中也可以正常工作，直到用户检查选项卡每月并以每小时视图查看图表（每月的标准视图是每日图表栏）。

当 Monthly -> Hourly 查看时，调用响应一个对象，其中包含大约 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
};
4

0 回答 0