从选择器获取Chart js对象

Question

创建像这样的图表（使用Chart.js，最新版本）后：

var ctx = $('#graph');
var graph = new Chart(ctx, {
  type: 'line',
  data: someData, 
});

我想在另一个函数中检索Chart对象，以便向它添加一些数据点：

var graph = ???
graph.data.labels.push(1)
graph.data.datasets[0].data.push(10);

如何获得图表对象？

先感谢您！

Answer 1

你可以这样做：

var graph = Chart.getChart('graph')

在 v3 中工作 - 不确定它是什么时候引入的。

Answer 2

也许：

 var ctx = $('#graph');
 var graph = new Chart(ctx, {
     type: 'line',
     data: someData, 
 });
 ctx.data('graph', graph);

然后：

 var graph = $('#graph').data('graph');
 graph.data.labels.push(1)
 graph.data.datasets[0].data.push(10);
 graph.update();

 

// //

Answer 3

您可以直接使用该graph对象，而无需将其分配给另一个变量（考虑graph是全局变量）来添加来自另一个函数的任何类型的数据。

这是一个简单的例子......

var ctx = $('#graph');
var graph = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May"],
        datasets: [{
            label: "Sales",
            data: [1, 2, 3, 4, 5],
            fill: false,
            borderColor: '#07C',
        }]
    }
});

function addData() {
    graph.data.labels.push('June')
    graph.data.datasets[0].data.push(6);
    graph.update();
}

<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/2.5.0/Chart.min.js"></script>
<button onclick="addData()">Add Data</button>
<canvas id="graph"></canvas>

如果：graph变量位于函数内部，则必须将变量设为全局变量才能从另一个函数使用它