[英]Unable to use MyChart function
I have got a function to update a chart in javascript. 我有一个功能来更新JavaScript中的图表。
Code: 码:
function updateChartAjaxCall(data1, data2)
{
//ajax call here
$.ajax({
type: 'POST',
url: 'data.php',
dataType: 'html',
data: {data1:data1,data2:data2},
success:function(data){
myChart.removeData();
myChart.addData('newLabel', [23, 33, 4]);
},
error:function (xhr, ajaxOptions, thrownError){
console.log(thrownError);
},
complete: function(){
}
});
event.preventDefault();
}
$(document).ready(function(){
$.ajax({
url: "http://localhost/chartjs/data.php",
method: "GET",
success: function(data) {
console.log(data);
var op1 = [];
var op2 = [];
let data_keys = Object.keys(data[0])
console.log(data_keys)
first = data_keys[0] //1st element
second = data_keys[1] //2nd element
for(var i in data) {
op1.push(data[i][first])
op2.push(data[i][second])
}
var chartdata = {
labels: op1,
datasets : [
{
label: 'SystemID and Apparent Power (VA)',
backgroundColor: 'rgba(250, 50, 50, 0.4)',
borderColor: 'rgba(500, 50, 50, 0.5)',
hoverBackgroundColor: 'rgba(500, 30, 30, 0.2)',
hoverBorderColor: 'rgba(500, 30, 30, 0.3)',
data: op2
}
]
};
var ctx = document.getElementById('mycanvas').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: chartdata,
options: {
scales: {
xAxes: [{
ticks: {
fontSize: 10
}
}],
yAxes: [{
ticks: {
fontSize: 10
}
}]
}
}
});
},
error: function(data) {
console.log(data);
}
});
});
Error I am getting: 我得到的错误:
app.js:11 Uncaught ReferenceError: myChart is not defined
at Object.success (app.js:11)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at y (jquery.min.js:4)
at XMLHttpRequest.c (jquery.min.js:4)
Can someone assist, why am I getting this error? 有人可以帮忙,为什么我会出现此错误? I am using chartJS library.
我正在使用chartJS库。 What am I missing?
我想念什么?
I have updated my code to show the declaration of myChart I need updateChartAjaxCall function global as I am calling it from another .html file to update data1
and data2
. 我已经更新了代码以显示myChart的声明,我需要全局的updateChartAjaxCall函数,因为我是从另一个.html文件中调用它来更新
data1
和data2
。
The error occur because in the scope of the metthod updateChartAjaxCall, myChart does not exist because your declared it inside the '$(document).ready(function(){' function 发生错误是因为在方法updateChartAjaxCall的范围内,myChart不存在,因为您在'$ {document).ready(function(){'函数内声明了它
This should work 这应该工作
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.update();
}
var myChart;
function updateChartAjaxCall(data1, data2) {
//ajax call here
$.ajax({
type: 'POST',
url: 'data.php',
dataType: 'html',
data: {
data1: data1,
data2: data2
},
success: function (data) {
removeData(myChart);
addData(myChart, 'newLabel', [23, 33, 4]);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(thrownError);
},
complete: function () {}
});
event.preventDefault();
}
$(document).ready(function () {
$.ajax({
url: "http://localhost/chartjs/data.php",
method: "GET",
success: function (data) {
console.log(data);
var op1 = [];
var op2 = [];
let data_keys = Object.keys(data[0])
console.log(data_keys)
first = data_keys[0] //1st element
second = data_keys[1] //2nd element
for (var i in data) {
op1.push(data[i][first])
op2.push(data[i][second])
}
var chartdata = {
labels: op1,
datasets: [{
label: 'SystemID and Apparent Power (VA)',
backgroundColor: 'rgba(250, 50, 50, 0.4)',
borderColor: 'rgba(500, 50, 50, 0.5)',
hoverBackgroundColor: 'rgba(500, 30, 30, 0.2)',
hoverBorderColor: 'rgba(500, 30, 30, 0.3)',
data: op2
}]
};
var ctx = document.getElementById('mycanvas').getContext('2d');
myChart = new Chart(ctx, {
type: 'line',
data: chartdata,
options: {
scales: {
xAxes: [{
ticks: {
fontSize: 10
}
}],
yAxes: [{
ticks: {
fontSize: 10
}
}]
}
}
});
},
error: function (data) {
console.log(data);
}
});
});
You can also add the utils function to the prototype to use function from myChart 您还可以将utils函数添加到原型以使用myChart中的函数
Chart.prototype.removeData = function() {
this.data.labels.pop();
this.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
this.update();
}
Chart.prototype.addData = function(label, data) {
this.data.labels.push(label);
this.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
this.update();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.