Highcharts с большой загрузкой данных вылетает IE11 - PullRequest
Новая
       37

Highcharts с большой загрузкой данных вылетает IE11

0 голосов
/ 07 января 2019

Я использую официальные Highcharts с React на странице для отображения разных измерений. Все работает отлично, за исключением IE11 (см. Рисунок), который по конкретному сценарию вылетает из браузера.

На странице пользователь может видеть измерения для ежедневных, еженедельных, ежемесячных и т. Д. Затем на каждой из этих вкладок отображаются Highcharts с данными за выбранное время. Он отлично работает даже в IE11 до тех пор, пока пользователь не проверит вкладку Monthly и не отобразит график в часовом представлении (стандартное представление для Monthly - дневной график).

Когда представление Ежемесячно -> Часовой, вызов отвечает объектом с около 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
};
...