Question

我想绘制一个多线图数据来自数据库请求的json。 Json的回复低于

[
 {
   "date": "28/09/2017 08:03",
   "data": {
           "1": 10,
           "2": 0
           }
 },
 {
   "date": "28/09/2017 08:04",
   "data": {
           "1": 0,
           "2": 5
           }
 }
]

在Json上，Data [1]和Data [2]将绘制在Chart Js图表的不同行上

我已经能够遍历数据但无法在图表上创建线条我想做这样的事情。循环并生成图表上的线

this.rdata = {
         labels: this.date,
         datasets: [ for (let _i = 1; _i <= 2; _i++) {
         this.value = [];

         for (const item of this.data) {
             //
             this.value.push(item.data[_i])
           {
              label: "Sensor Report",
             data:this.value ,
            borderColor": "#4BC0C0",

            },
         }

     }

}

但是，不可能编写上面的代码

Answer 1

我能够解决它。如果有人以后需要帮助，这里是在chartjs中自动创建多yaxis折线图的代码

 var colors = [
        "#2E8B57",
        "#f0ad4e",
        "#DEB887",
        "#A9A9A9",
        "#FAEBD7",
        "#DCDCDC",
        "#E9967A",
        "#F5DEB3",
        "#9ACD32",
        "#4272b7",
        "#0078ff",
        "#0003d2",
        "#4272b7",
        "#0065d0",
        "#c0d6e4",
        "#d001cf",
        "#d2d0d1",
        "#337465",
        "#0a4168",
        "#79e381",
        "#cedee9",
        "#149491",
        "#e8bbc0",
        "#cf3523",
        "#e12241",
        "#110055",
        "#899ec1",
        "#f2daf5",
        "#6a6a92",
        "#899ec1",
        "#c7ecf4",
        "#ffd78b",
        "#595fed",
        "#487de4",
        "#5abbf1",
        "#71d1d7",
        "#a1e4d3",
        "#554468",
        "#db4264",
        "#ef6389",
        "#ff92b5",
        "#fee398",
        "#4e93aa",
        "#dae6ea",
        "#90b5c1",
        "#468499",
        "#330033",
        "#d3ffce",
        "#149491",
        "#d2d0d1",
    ];

    var axis = [
        'A',
        'B'
    ];

    var axisID = 0;

    this.liner = 0;
    this.lineChartData = {}; //declare an object
    this.lineChartData.labels = []; //add 'labels' element to object (X axis)
    this.lineChartData.datasets = []; //add 'datasets' array element to object

    for (let line = 0; line < 2; line++) {


        this.liner = line + 1;
        this.y = [];
        this.lineChartData.datasets.push({}); //create a new line dataset
        this.dataset = this.lineChartData.datasets[line];
        //  this.dataset.fillColor = "rgba(0,0,0,0)";
        // this.dataset.strokeColor = "rgba(200,200,200,1)";
        this.dataset.label = "Sensor" + this.liner;
        this.dataset.fill = true;
        this.dataset.lineTension = 0.5;
        this.dataset.yAxisID = axis[axisID];
        this.dataset.backgroundColor = "rgba(153,255,51,0.4)";
        this.dataset.borderColor = colors[line];
        this.dataset.pointHoverBackgroundColor = "rgba(153,255,51,0.4)";
        this.dataset.pointHoverBorderColor = "rgba(59, 89, 152, 1)";
        this.dataset.spanGaps = false;
        this.dataset.data = []; //contains the 'Y; axis data

        for (const item of this.data) {
            this.y.push(item.data[this.liner]); //push some data aka generate 4 distinct separate lines
            if (line === 0)
                this.lineChartData.labels.push(item.date); //adds x axis labels
        } //for x

        this.lineChartData.datasets[line].data = this.y; //send new line data to dataset

        if (axisID == 1) {
            axisID = 0;
        } else {
            axisID++;

        }
    } //for line

    // ctx = document.getElementById("Chart1").getContext("2d");
    // myLineChart = new Chart(ctx).Line(lineChartData);

    console.log(this.lineChartData);

    this.barChart = new Chart(this.barCanvas.nativeElement, {

        type: 'line',
        data: this.lineChartData,
        options: {
            responsive: false,
            animation: {
                duration: 0,
            },
            elements: {
                line: {
                    borderWidth: 1,
                },
                point: {
                    radius: 5,
                },
            },
            scales: {
                xAxes: [{

                    scaleLabel: {
                        display: true,
                        labelString: "Time",
                    },
                }],
                yAxes: [{
                    position: "left",
                    id: "A"

                }, {
                    position: "right",
                    id: "B"
                }],

            },
        },

    });

使用ChartJS在Ionic 3中绘制多个折线图

1 个答案: