反应图表不更新 从“Highcharts”导入Highcharts； 从“highcharts react official”导入highcharts react； 从“React”导入React，{useState} 常量条形图=（）=>{ const API=process.env.REACT\u APP\u API\u URL； 变量选项初始值：高图表。选项={ 图表：{ 类型：'bar' }, 标题：{ 正文：“按区域分列的历史世界人口” }, 副标题:{ 文本：“来源：” }, xAxis：{ 类别：[“非洲”、“美洲”、“亚洲”、“欧洲”、“大洋洲”]， 标题：{ 文本：空 } }, 亚克斯：{ 分:0,， 标题：{ 正文：“人口（百万）”， 对齐：“高” }, 标签：{ 溢出：'justify' } }, 工具提示：{ valueSuffix:'百万' }, 打印选项：{ 酒吧：{ 数据标签：{ 已启用：true } } }, 图例：{ 布局：“垂直”， 对齐：“右”， 垂直排列：“顶部”， x:-40， y:80， 浮动：是的， 边框宽度：1， 背景颜色： "FFFFFF",， 影子：对 }, 学分：{ 已启用：false }, 系列：[{ 输入：“酒吧”， 名称：“1800年”， 数据：[107,31635203,2] }, { 输入：“酒吧”， 名称:"1900年",， 数据：[133156947408,6] }, { 输入：“酒吧”， 名称：“2000年”， 数据：[8148413714727,31] }, { 输入：“酒吧”， 名称：“2016年”， 数据：[121610014436738140] }] } const[options，setOptions]=useState（optionsInitial） React.useffect（（）=>{ fetch（${API}Clientcomparison/gettouction`{ 方法：“获取”， 标题：{ “授权”：“承载者”+localStorage.getItem（@token”）， “内容类型”：“应用程序/json” } }) 。然后（（res）=>{ return res.json（） }) 。然后（（res:Array）=>{ 调试器 让optupdate=optionsInitial； 让seriesToUpdate:any[]=[]； res.forEach（（i:任何）=>{ seriesToUpdate=seriesToUpdate.concat([ { 输入：“酒吧”， 名称：i.categorycount， 数据：[8148413714727,31] } ]) }) optToUpdate[“系列”]=系列更新 设置选项（optotupdate） console.log（res） }) .catch（（err）=>console.log（err）） }, []); 返回( ) } 导出默认条形图；

我尝试了多种解决方案，但都不奏效

我试过了

• updateArgs={[true，true，true]}
• allowChartUpdate={true}
• oneToOne={true}

但是没有运气

---

我第一次使用硬编码数据绘制图表，然后发送API调用以在useffect中获取数据并更新状态。我可以在调试工具中看到状态已更新，但没有反映出来。

Hi@Usama Alvi，这里的更新似乎工作正常：但我不确定API的响应示例是什么。您能否调整上面的示例以显示问题？Hi@ppotaczek，它确实在链接上工作，我无法从您提供的链接调用API，因为该链接尚未部署，目前正在本地环境中。我不确定还有什么其他因素在干扰bcz代码，它看起来很简单，你不需要调用真正的API，你可以模拟它。只有响应才是重要的。这就是响应，还有一点我想指出，我使用的是typescipt而不是javascript

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import React, { useState } from 'react'

const BarChart = () =>  {
    const API = process.env.REACT_APP_API_URL;
    var optionsInitial: Highcharts.Options = {
        chart: {
          type: 'bar'
        },
        title: {
          text: 'Historic World Population by Region'
        },
        subtitle: {
          text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
        },
        xAxis: {
          categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
          title: {
            text: null
          }
        },
        yAxis: {
          min: 0,
          title: {
            text: 'Population (millions)',
            align: 'high'
          },
          labels: {
            overflow: 'justify'
          }
        },
        tooltip: {
          valueSuffix: ' millions'
        },
        plotOptions: {
          bar: {
            dataLabels: {
              enabled: true
            }
          }
        },
        legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'top',
          x: -40,
          y: 80,
          floating: true,
          borderWidth: 1,
          backgroundColor:
            '#FFFFFF',
          shadow: true
        },
        credits: {
          enabled: false
        },
        series: [{
          type: "bar",
          name: 'Year 1800',
          data: [107, 31, 635, 203, 2]
        }, {
          type: "bar",
          name: 'Year 1900',
          data: [133, 156, 947, 408, 6]
        }, {
          type: "bar",
          name: 'Year 2000',
          data: [814, 841, 3714, 727, 31]
        }, {
          type: "bar",
          name: 'Year 2016',
          data: [1216, 1001, 4436, 738, 40]
        }]
      }

      const [options, setOptions] = useState<Highcharts.Options>(optionsInitial)
      React.useEffect(() => {

        fetch(`${API}Clientcomparison/GetSentiment`, {
          method: "GET",
          headers: {
            'Authorization': 'Bearer ' + localStorage.getItem("@token"),
            'Content-Type': 'application/json'
          }
        })
          .then((res) => {
    
            return res.json()
          })
          .then((res : Array<object>) => {
            debugger
            let optToUpdate = optionsInitial;
            let seriesToUpdate: any[] = [];
    
            res.forEach((i:any)=>{
              seriesToUpdate = seriesToUpdate.concat([
                {
                type: "bar",
                name: i.categorycount,
                data: [814, 841, 3714, 727, 31]
    
              }
            ])
            })
               
            optToUpdate["series"] = seriesToUpdate
            setOptions(optToUpdate)
            console.log(res)
          })
          .catch((err) => console.log(err))
    
    
    
    
      }, []);
    return (
       
    <HighchartsReact
    highcharts={Highcharts}
    options={options}
 
     

  />
    )
}


export default BarChart;