Javascript Chart.js传递值数据动态
我希望通过ajax使用数据和动态级别，所以我使用如下方式，但不起作用 我的ajax在php的Javascript Chart.js传递值数据动态,javascript,php,jquery,ajax,chart.js,Javascript,Php,Jquery,Ajax,Chart.js,我希望通过ajax使用数据和动态级别，所以我使用如下方式，但不起作用 我的ajax在php的json\u encode中返回数据。 我的代码是： success: function (result) { result = JSON.parse(result); var labels = result['labels']; var data = result['data']; //console.log(dat
json\u encodesuccess: function (result) {
result = JSON.parse(result);
var labels = result['labels'];
var data = result['data'];
//console.log(data);
var ctx = document.getElementById("chartbtc");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [labels],
datasets: [{
label: 'Market Price (USD)',
data: [data],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
}
}
});
}
{"labels":"13-Nov-2017, 14-Nov-2017, 15-Nov-2017, 16-Nov-2017, 17-Nov-2017, 18-Nov-2017, 19-Nov-2017, 20-Nov-2017, 21-Nov-2017, 22-Nov-2017, 23-Nov-2017, 24-Nov-2017, 25-Nov-2017, 26-Nov-2017, 27-Nov-2017, 28-Nov-2017, 29-Nov-2017, 30-Nov-2017, 01-Dec-2017, 02-Dec-2017, 03-Dec-2017, 04-Dec-2017, 05-Dec-2017, 06-Dec-2017, 07-Dec-2017, 08-Dec-2017, 09-Dec-2017, 10-Dec-2017, 11-Dec-2017, 12-Dec-2017","data":"6550.22, 6635.41, 7301.42, 7815.03, 7786.88, 7817.14, 8007.65, 8255.59, 8059.8, 8268.03, 8148.94, 8250.97, 8707.4, 9284.14, 9718.29, 9952.5, 9879.32, 10147.37, 10883.91, 11071.36, 11332.62, 11584.82, 11878.43, 13540.98, 16501.97, 16007.43, 15142.83, 14869.8, 16762.11, 17276.39"}
因为您已经提供了ajax结果，所以这不适用于图表生成。在您的例子中，
result[“labels”]labelslabelssplit（）“，”{“标签”：[“2017年11月13日”、“2017年11月14日”，…]）希望这有帮助 您第一次可以用自己的值填充图表，但是当动态追加数据时，您应该删除
画布<canvas id="chartbtc" class="canvasChart"></canvas>
<script>
dynamicDataAppendOnChart(labels, data); // On page loading you will be having your own data so you can pass them, or if you want that to be happen with ajax when page loading itself you can trigger the click event.
$('#btnClick').trigger('click');
// You will be calling the function with click event...
$('#btnClick').on('click', function () {
var data = '', labels = '';
$.ajax({
url: url,
type: "POST",
data: data,
async: isAsync,
success: function (result) {
result = JSON.parse(result);
labels = result['labels'];
data = result['data'];
}
});
dynamicDataAppendOnChart(labels, data); // Now you can call the function by passing labels and data
});
function dynamicDataAppendOnChart() {
$('#chartbtc').remove();
$('#appendTheCanvasElement').append('<canvas id="chartbtc" class="canvasChart"><canvas>'); // This would create new canvas element every time and removes the older one.
var ctx = document.getElementById("chartbtc");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [labels],
datasets: [{
label: 'Market Price (USD)',
data: [data],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
}
}
});
}
</script>
dynamicDataAppendOnChart（标签、数据）；//在页面加载时，您将拥有自己的数据以便可以传递它们，或者如果您希望在页面加载时使用ajax实现这一点，您可以触发单击事件。
$（'btnClick'）。触发器（'click'）；
//您将使用单击事件调用函数。。。
$（'btnClick'）。在（'click'，函数（）{
变量数据=“”，标签=“”；
$.ajax({
url:url，
类型：“POST”，
数据：数据，
异步：isAsync，
成功：功能（结果）{
result=JSON.parse（result）；
标签=结果['labels']；
数据=结果[‘数据’]；
}
});
dynamicDataAppendOnChart（标签，数据）；//现在可以通过传递标签和数据来调用函数
});
函数dynamicDataAppendOnChart（）{
$（'#chartbtc'）。删除（）；
$（“#appendthecanvassement”）.append（“”）；//这将每次创建新的画布元素并删除旧的画布元素。
var ctx=document.getElementById（“chartbtc”）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：[标签]，
数据集：[{
标签：“市场价格（美元）”，
数据：[数据]，
背景颜色：[
"rgba(255,99,132,0.2)",，
“rgba（54162235,0.2）”，
"rgba(255,206,86,0.2)",，
“rgba（751921920.2）”，
“rgba（153102255,0.2）”，
‘rgba（255、159、64、0.2）’
],
边框颜色：[
"rgba(255,99132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
‘rgba（255、159、64、1）’
],
边框宽度：1
}]
},
选项：{
回答：是的，
MaintaintAspectRatio:false，
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：错
}
}]
}
}
});
}
var labels = result['labels'].split(","); // Return Array of Strings Of labels
var data = JSON.parse("[" + result['data'] + "]");// return array of data
因为它已经在数组中您的浏览器控制台中有错误吗？如果您放置一个
console.log（“测试”）就在var myChart…
打印出来之前？测试正在控制台上显示，我已经更新了ajax结果，所以请再次检查问题。Thanks@ShivSingh你仍然只提供了一个字符串。执行结果[“labels”]拆分（“，”）标签
属性。希望这有帮助！拆分标签和数据后解决（“，”）
labels: [labels],
data: [data],
labels: labels,
data: data,