【问题标题】:How to copy data from an array to an apex heatmap chart?如何将数据从数组复制到顶点热图图表?
【发布时间】:2020-01-27 12:14:15
【问题描述】:

我创建了一个顶点热图图表并添加了以下状态数据以使用初始值填充图表。

    this.state = {   
        seriesCompact: [{
            name: '1',
            data: [45, 123, 4864, 1531, 121, 15]
            },
            {
                name: '2',
                data: [534, 4534, 12, 784, 121, 8847]
            },
            {
                name: '3',
                data: [453, 453, 12, 453, 135, 51]
            },
            {
                name: '4',
                data: [4, 453, 45, 12, 44, 153]
            },
            {
                name: '5',
                data: [51, 513, 45, 12, 84, 21]
            },
            {
                name: '6',
                data: [434, 453, 8464, 534, 87643, 543]
            },
        ],
    }

我从数据库中获取数据并将其存储在一个数组中。它包含 36 个整数值。

let data = [543,220195,56767,578433,45773,573335,501974,846359,88518,673208,
10086,705133,332856,449014,167144,102293,241678,661375,322747,830976,841206,254525,         17574,80045,717178,290102,59301,368118,
852860,246908,453454,601215,640807,530396,219809,986924];

我想用数组中的值替换上面 6 个数据字段中的数据。

最好的方法是什么?

谢谢!

【问题讨论】:

  • 你能分享你的阵列吗,你能展示你到目前为止所做的事情吗?添加更多细节

标签: javascript arrays reactjs charts apexcharts


【解决方案1】:

我希望这会有所帮助:

for(let serie of state.seriesCompact){
    serie.data=data; 
    num=num+6;
}
//Result:
console.log(state.seriesCompact);

【讨论】:

    【解决方案2】:

    这实际上取决于您的数据结构。我假设您的数据是按 6 组顺序排列的(每个系列 6 组)。如果您提供更多详细信息,我可以更新我的答案。

    
    const updateSeriesData = data => {
      // get the current series
      let { seriesCompact } = this.state;
    
      // move through data array and assign `seriesCompact[i].data` a new six values
      for (let i = 0; i < 6; i++) {
        // slice the data beginning at 
        // (6 * i) and ending at (6 * (i + 1)) noninclusive
        seriesCompact[i].data = data.slice(6 * i, 6 * (i + 1));
      }
    
      // set state with new series
      this.setState({ seriesCompact });
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-02-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-01-10
      相关资源
      最近更新 更多