从选择器获取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);

如何获取Chart对象？

先感谢您！

Answer 1

您可以直接使用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变量在函数内，那么你必须使变量全局从另一个函数使用它

Answer 2

也许：

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

然后：

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

Answer 3

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