从选择器中获取Chart.js对象

Question

使用以下代码（最新版本的 Chart.js）创建这样一个图表：

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

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

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

我该如何获取图表对象？

提前感谢您！

- JIN

Answer 1

你可以这样做：

var graph = Chart.getChart('graph')

可在 v3 中使用 - 不确定是何时引入的。

- Bryn Lewis

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();

 

// //

- Mario Orlandi

---

我喜欢这个想法，但据我所见，修改那个数据对象对呈现的图表没有影响。例如，我可以从中读取.config.type，但更改它不起作用。我希望chart.js能够提供一些支持的方式来从其DOM元素访问图表对象。这似乎是基本的。 - enigment

修改该数据对象对呈现的图表没有影响。我相信它会有影响！您可能需要在修改后更新图表。 - Mario Orlandi

我希望chart.js能够提供一些支持的方式来从其DOM元素访问图表对象。没错！但这正是我在上面的片段中所做的：将图表对象作为属性附加到DOM元素，以便稍后检索并使用它。 - Mario Orlandi

糟糕！你是对的，用update()可以正常工作，谢谢。 - enigment

你的模板中是否忘记了 <canvas id="graph"></canvas>？ - Mario Orlandi

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 变量在一个函数内部，那么你需要将变量声明为全局变量才能在另一个函数中使用。

- ɢʀᴜɴᴛ

---

我创建图表的代码在 document.ready 函数中，因此它不是全局的。我认为在全局范围内定义变量是不好的实践，但是我通过这种方式解决了它。谢谢！ - JIN

如果我们没有将图表对象保存在变量中，或者我们无法访问该变量，因为它可能被其他图表对象覆盖，那么我们如何访问图表对象呢？ - Rahul Hindocha

Answer 4

//get object
const chartJS: Chart = $("#myChart").data('chart');

//change something
chartJS.config.options.scales.yAxes[0].ticks.min = minVal <= 0 ? minVal : minVal - 

//update
chartJS.update();

- Maayan Hope

---

对我来说， $(<appropriateQuerySelector>).data('chart') 返回 undefined。 - Alexandre Huat