从选择器获取Chart js对象

时间:2017-05-16 20:42:23

标签: jquery chart.js

创建这样的图表后(使用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对象?

提前谢谢!

3 个答案:

答案 0 :(得分:3)

也许:

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

答案 1 :(得分:2)

您可以直接使用graph对象而不将其分配给另一个变量(考虑graph是一个全局变量)来添加来自另一个函数的任何类型的数据。< / p>

以下是一个简单的例子......

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变量在函数内,那么你必须使变量 global 从另一个函数中使用它

答案 2 :(得分:0)

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