时间戳

首页 > 解决方案 > 如何从JSON动态地在图表js中添加多个数据

javascript - 如何从JSON动态地在图表js中添加多个数据

问题描述

我在JSON下面有这个。我想在图表 js 中显示以下数据。对于每个标签“2020Q2”，我将拥有一组条形图。目前我已将此添加为静态。如何以动态方式添加到数据集。

JSON 需要显示为每个季度的条形-

 {
        "2020Q2": {
            "defendtarget": 0,
            "target": 0,
            "totaldisplacement": 2
        },
        "2020Q3": {
            "defendtarget": 0,
            "target": 0,
            "totaldisplacement": 2
        }
    }

JS-

_buildDouChart() {
    var labelset = [];
    var dataset = [];
    for ( let key in this.aggResult )
    {
        if ( this.aggResult.hasOwnProperty( key ) )
        {
            this.labelset.push( key );
            this.dataset.push( this.aggResult[ key ] );
        }
    }
    let canvas = this.template.querySelector( "canvas.chart" );
    let context = canvas.getContext( "2d" );
    this.chart = new window.Chart( context, {
        type: "bar",
        data: {
            labels: this.labelset,
            datasets: [
                {
                    label: 'defendtarget',
                    backgroundColor: "#fd3612",
                    data: [ 1, 1 ],
                },
                {
                    label: 'target',
                    backgroundColor: "#f9d342",
                    data: [ 1, 1 ]
                },
                {
                    label: 'totaldisplacement',
                    backgroundColor: "#f9d342",
                    data: [ 2, 2 ]
                },
            ]
        },
        options: {
            scales: {
                yAxes: [ {
                    ticks: {
                        beginAtZero: true
                    },
                }, ]
            }
        }
    } );
}

标签： javascriptchart.js

解决方案

为了在从数据源获取数据时动态传递数据，您需要为每个条维护三个数组。

那是defenTarget，target和totalDisplacement 之一。

当您从数据源获取对象时，您需要隔离对象的数量。为此，您可以使用以下行：

this.totalRecords=Object.keys(this.data)

然后假设您需要为defenceTarget生成数组。您需要使用以下逻辑：

this.totalRecords.forEach((record)=>{
    this.defendTargetData.push(record.defendTarget)
     })

编辑：要获得所需的条数，您需要使用以下代码：

this.totalBars = Object.keys(this.totalRecords[0])

现在您可以将数据集的代码更新为：

 this.totalBars.forEach((bar)={
  currentDataSet = {label:bar,backgroundColor: 
     "#fd3612",data:[]};
  this.totalRecords.forEach((record)=>{
        currentDataSet.data.push(record.bar)
       })
   this.dataSet.push(currentDataSet)
  })

我希望这符合您的要求。

推荐阅读