在Chart.js中将数据动态填充到图表中

时间:2018-07-09 11:13:05

标签: chart.js

chart.js中,我准备的图表很少。我正在尝试放置通过JSON文件获取的数据。如何在图表中自动更改图表数据?我正在从json获取URL数据。

chartData1:{
            labels: ["01 Jan","02 Jan","03 Jan","04 Jan","05 Jan","06 
                     Jan","07 Jan"],
            datasets: [{
                 label: "s1",
               data: 
         [100,0,1,0,0,1,0,0,0,1,2,3,0,0,0,0,1,1,1,0,0,0,2,1,1,0,1,3,2,1,0],

               fill:false,

                  borderColor: 'Orange',
                  lineTension:0,
                  borderWidth:2,
                  radius:2
              },
               {
                 label: "s2",
                 data: 
             [2,3,4,1,4,5,3,2,0,1,0,3,5,6,3,7,2,0,5,3,1,2,3,1,0,5,4,5,8,6,2],
                fill:false,
                borderColor: 'Violet',
                lineTension:0,
                borderWidth:2,
                radius:2
             }
            ] 
         },

1 个答案:

答案 0 :(得分:0)

“折线图”是您要在其中显示图表的<canvas>的ID。

尝试一下。

var chart1 = document.getElementById("line-chart").getContext("2d");
                      window.myLine = new Chart(chart1).Line(chartData1, {
                      responsive: true,
                      scaleLineColor: "rgba(0,0,0,.2)",
                      scaleGridLineColor: "rgba(0,0,0,.05)",
                      scaleFontColor: "#c5c7cc"

                      });