在 React 中使用计时器时，使用 HighchartsReact 更新图表不起作用

Question

我有使用 Highchart 和 React 在我的页面上显示数据的代码

  var chart_nps_amigo = {
    title: { text: '% Alunos x total de horas de acesso' },
    chart: { height: 200, type: 'column' },
    xAxis: {
      type: 'category',
      labels: {
          rotation: -45,
          style: {
              fontSize: '13px',
              fontFamily: 'Verdana, sans-serif'
          }
      }
    },
    yAxis: {
        title: { text: 'Número de alunos' }
    },
    tooltip: {
        pointFormat: 'Porcentagem: <b>{point.y:.1f} alunos</b>'
    },
    series: [{
      name: 'Alunos',
      data: [
          ['Nunca acessou', 24.2],
          ['Até 4h', 10.8], 
          ['Até 8h', 22.5], 
          ['Até 12h', 11],
          ['Até 16h', 9.3],
          ['Mais de 16h', 4.8]
      ],
      dataLabels: {
          enabled:   true,
          align: 'center',
          format: '{point.y:.1f}', // one decimal
          y: 10, 
          style: {
              fontSize: '11px',
              fontFamily: 'Verdana, sans-serif'
          }
      }
    }]

  }

我可以使用以下代码在我的页面中显示图表

<HighchartsReact
          highcharts={Highcharts}
          options={chart_nps_amigo}
          allowChartUpdate={true}
        />

使用下面的代码我可以更新图表

      chart_nps_amigo.series[0].data.push( ['32h v1', 55] );

但我想使用来自使用 Redux 和 Redux-Saga 的 Web 服务器的值更新图表。

为了模拟这一点，我使用以下代码创建了一个计时器事件来更新图表：

const timer = setTimeout(() => {
  chart_nps_amigo.series[0].data.push( ['32h v2', 24.8] );
  console.log('This will run after 10 second!')
}, 10000);

但 10 秒后，日志代码显示在浏览器控制台中，但图表未更新。

我怎样才能完成这项工作？

Answer 1

您应该将您的配置保持在组件状态并在那里更新您的数据，就像这里所做的那样：https://github.com/highcharts/highcharts-react#optimal-way-to-update

Answer 2

我现在找到解决办法了。基于@SebastianWędzel

的回答

按照我之前描述数据的方式，它是 javascript 中的数组，但它不是有效的 json 对象。

series: [{
  name: 'Alunos',
  data: [
      ['Nunca acessou', 24.2],
      ['Até 4h', 10.8], 
      ['Até 8h', 22.5], 
      ['Até 12h', 11],
      ['Até 16h', 9.3],
      ['Mais de 16h', 4.8]
  ],

但是由于我使用 redux 和 redux-saga 从 Web 服务器恢复了这个值，我需要一种方法来添加有效的 Json 对象。

当我查看 Highcharts 文档时，我找到了另一种使用有效 Json 对象显示系列数据的方法

series: [{
  name: 'Alunos',
  data: [{
    "name": "Nunca acessou",
    "y": 24.2
  }, {
    "name": "Até 4h",
    "y": 10.8
  }],

现在我将从 Web 服务器获取的值仅附加到图表的系列数据部分

series: [{
  name: 'Alunos',
  data: chart.myData,

现在可以使用了。

在 React 中使用计时器时，使用 HighchartsReact 更新图表不起作用

Update chart with HighchartsReact is not working when a timer is used in React

highcharts

reactjs