как добавить несколько данных в диаграмму js динамически из JSON - PullRequest
Новая
       4

как добавить несколько данных в диаграмму js динамически из JSON

0 голосов
/ 12 июля 2020

Вот это у меня ниже JSON. Я хочу отобразить приведенные ниже данные в диаграмме js. для каждой метки «2020Q2» у меня будет группа столбцов. В настоящее время я добавил это как stati c. Как добавить в набор данных как динамические c.

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
                    },
                }, ]
            }
        }
    } );
}

1 Ответ

0 голосов
/ 12 июля 2020

для динамической передачи данных, получаемых из источника данных, вам необходимо поддерживать по три массива для каждого бара.

то есть один для defndTarget , target и totalDisplacement ..

По мере того, как вы получаете объект из источника данных, вам необходимо разделить количество объектов. Для этого вы можете использовать следующую строку: 

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

Затем предположим, что вам нужно сгенерировать массив для defenderTarget . Вам необходимо использовать следующий лог c: 

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)
  })

Я надеюсь, что это будет соответствовать вашим требованиям.

...