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

5us2dqdw  于 2022-11-11  发布在  Highcharts
关注(0)|答案(2)|浏览(178)

我使用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服务器的值更新图表。
为了模拟这一点,我使用以下代码创建了一个timer事件来更新图表:

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

但10秒钟后,日志代码显示在浏览器控制台中,但图表没有更新。
我该怎么做呢?

7eumitmz

7eumitmz1#

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

bfrts1fy

bfrts1fy2#

我现在找到了一个解决方案。基于@ SebastianWdzel的答案
我之前描述数据的方式是,它是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,

现在起作用了。

相关问题