Question

我正在处理一些网站项目，我在使用chart.js时遇到问题，我想更改图表内部的数据，所以当我点击按钮时数据值正在改变，但是我在＆＃39;我坚持下去，我不知道该怎么做。这是与我的项目Chart.js类似的代码示例。

＆＃13;

var data = {
    labels: ['January', 'February', 'March'],
    
    datasets: [
        {
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [30,120,90]
        },
        {
        fillColor: "rgba(100,220,220,0.7)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [10,70,110]
        }
    ]
    };

    var context = document.querySelector('#graph').getContext('2d');
    new Chart(context).Line(data);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="graph" width="800px" height="400px"></canvas>

<button>
Option 1
</button>
<button>
Option 2
</button>

＆＃13;

Answer 1

致电Chart(context).Line(New data); 在按钮上单击以重新加载图表。

var data = {
    labels: ['January', 'February', 'March'],
    
    datasets: [
        {
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [30,120,90]
        },
        {
        fillColor: "rgba(100,220,220,0.7)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [10,70,110]
        }
    ]
    };

var data1 = {
    labels: ['March', 'Apr', 'May'],
    
    datasets: [
        {
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [50,100,140]
        },
        {
        fillColor: "rgba(100,220,220,0.7)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [40,70,200]
        }
    ]
    };

var context = document.querySelector('#graph').getContext('2d');
new Chart(context).Line(data);
    
$("#btn1").on("click", function() {
     var context1 = document.querySelector('#graph').getContext('2d');
    new Chart(context1).Line(data);
  });
$("#btn2").on("click", function() {
    var context2 = document.querySelector('#graph').getContext('2d');
    new Chart(context2).Line(data1);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="graph" width="800px" height="400px"></canvas>

<button id="btn1">
Option 1
</button>
<button id="btn2">
Option 2
</button>

Answer 2

您应该更新所需的数据并调用update方法。

https://www.chartjs.org/docs/latest/developers/api.html#updateconfig

const context = document.querySelector('#graph').getContext('2d'),
      chart = new Chart(context).Line(data);

$("#btn1").on("click", function() {
    chart.data.datasets[0].data = [140,100,50];
    chart.update();
});

在chart.js中单击按钮时更改数据

2 个答案: