将变量传递给canvasjs中的数据点
Pass variable to datapoints in canvasjs
我正在尝试使用数据库数据从 canvasjs 制作线条 garph。但是我在将数据传递到数据点时遇到问题。
$.ajax({
dataType : "json",
type: "POST",
url: base_url + 'index.php/dashboard/line_graph',
data: {},
success: function(data)
{
for(var i = 0; i < data.length; i++)
{
var firstdate = data[i].nextdate;
var res = firstdate.replace(/[-]/g,',');
fd += '{ x: new Date(' + res + '), y:' + data[i].count +'},';
}
var fin = fd.slice(0,-1);
finals = "[" + fin + "]";
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Booking - per month (DEMO)"
},
data: [
{
type: "line",
dataPoints: finals
}
]
});
chart.render();
}
});
当我提醒 finals
并将提醒的数据复制粘贴到数据点时,运行 然后它开始工作。但是当包含相同数据的变量传递给数据点时,它就不起作用了。
在控制台日志中,我收到此错误。
TypeError: l.dataPoints[q].x is undefined
数据点的格式是这样的。当我发出警报时,变量 finals
也包含相同的数据。
[
{ x: new Date(2015,03,6), y:4},
{ x: new Date(2015,03,11), y:0},
{ x: new Date(2015,03,16), y:0},
{ x: new Date(2015,03,21), y:0},
{ x: new Date(2015,03,26), y:0},
{ x: new Date(2015,03,31), y:14}
]
我的页面returns这种json_encode格式。
[
{"firstdate":"2015-03-01","nextdate":"2015-03-6","count":"4"},
{"firstdate":"2015-03-6","nextdate":"2015-03-11","count":"0"},
{"firstdate":"2015-03-11","nextdate":"2015-03-16","count":"0"},
{"firstdate":"2015-03-16","nextdate":"2015-03-21","count":"0"},
{"firstdate":"2015-03-21","nextdate":"2015-03-26","count":"0"},
{"firstdate":"2015-03-26","nextdate":"2015-03-31","count":"14"}
]
我不明白这些问题。请帮助。
不要将所有东西都创建为字符串:
var finals = [];
for(var i = 0; i < data.length; i++)
{
var firstdate = data[i].nextdate;
var res = firstdate.replace(/[-]/g,',');
finals.push({ x: new Date(res), y: parseInt(data[i].count)});
}
你不必像字符串那样创建finals
变量,你可以直接使用Javascript的对象格式:
$.ajax({
type: "POST",
url: base_url + 'index.php/dashboard/line_graph',
data: {},
success: function(data)
{
var tabData = JSON.parse(data);
var finals = [];
for(var i = 0; i < tabData.length; i++)
{
var firstdate = tabData[i].nextdate;
var res = firstdate.split('-');
finals.push({ 'x': new Date(res[2],res[1],res[0]), 'y': tabData[i].count });
}
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text: "Booking - per month (DEMO)"
},
data: [
{
type: "line",
dataPoints: finals
}
]
});
chart.render();
}
});
像这样传递数据
数据点:JSON.parse(数据)
而不是
数据点:数据
您可以在视图中构建数组数据,使用 php 变量的循环,例如:
<script type="text/javascript">
var current_month = [];
<?php foreach ($grafico_current as $key => $value) { ?>
current_month.push({ 'x': new Date(<?php echo $value['ano']; ?>,<?php echo $value['mes']; ?>,<?php echo $value['dia']; ?>), 'y': <?php echo $value['total']; ?> });
<?php } ?>
</script>
之后,使用这个新变量设置数据点:
dataPoints: current_month
我正在尝试使用数据库数据从 canvasjs 制作线条 garph。但是我在将数据传递到数据点时遇到问题。
$.ajax({
dataType : "json",
type: "POST",
url: base_url + 'index.php/dashboard/line_graph',
data: {},
success: function(data)
{
for(var i = 0; i < data.length; i++)
{
var firstdate = data[i].nextdate;
var res = firstdate.replace(/[-]/g,',');
fd += '{ x: new Date(' + res + '), y:' + data[i].count +'},';
}
var fin = fd.slice(0,-1);
finals = "[" + fin + "]";
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Booking - per month (DEMO)"
},
data: [
{
type: "line",
dataPoints: finals
}
]
});
chart.render();
}
});
当我提醒 finals
并将提醒的数据复制粘贴到数据点时,运行 然后它开始工作。但是当包含相同数据的变量传递给数据点时,它就不起作用了。
在控制台日志中,我收到此错误。
TypeError: l.dataPoints[q].x is undefined
数据点的格式是这样的。当我发出警报时,变量 finals
也包含相同的数据。
[
{ x: new Date(2015,03,6), y:4},
{ x: new Date(2015,03,11), y:0},
{ x: new Date(2015,03,16), y:0},
{ x: new Date(2015,03,21), y:0},
{ x: new Date(2015,03,26), y:0},
{ x: new Date(2015,03,31), y:14}
]
我的页面returns这种json_encode格式。
[
{"firstdate":"2015-03-01","nextdate":"2015-03-6","count":"4"},
{"firstdate":"2015-03-6","nextdate":"2015-03-11","count":"0"},
{"firstdate":"2015-03-11","nextdate":"2015-03-16","count":"0"},
{"firstdate":"2015-03-16","nextdate":"2015-03-21","count":"0"},
{"firstdate":"2015-03-21","nextdate":"2015-03-26","count":"0"},
{"firstdate":"2015-03-26","nextdate":"2015-03-31","count":"14"}
]
我不明白这些问题。请帮助。
不要将所有东西都创建为字符串:
var finals = [];
for(var i = 0; i < data.length; i++)
{
var firstdate = data[i].nextdate;
var res = firstdate.replace(/[-]/g,',');
finals.push({ x: new Date(res), y: parseInt(data[i].count)});
}
你不必像字符串那样创建finals
变量,你可以直接使用Javascript的对象格式:
$.ajax({
type: "POST",
url: base_url + 'index.php/dashboard/line_graph',
data: {},
success: function(data)
{
var tabData = JSON.parse(data);
var finals = [];
for(var i = 0; i < tabData.length; i++)
{
var firstdate = tabData[i].nextdate;
var res = firstdate.split('-');
finals.push({ 'x': new Date(res[2],res[1],res[0]), 'y': tabData[i].count });
}
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text: "Booking - per month (DEMO)"
},
data: [
{
type: "line",
dataPoints: finals
}
]
});
chart.render();
}
});
像这样传递数据 数据点:JSON.parse(数据)
而不是 数据点:数据
您可以在视图中构建数组数据,使用 php 变量的循环,例如:
<script type="text/javascript">
var current_month = [];
<?php foreach ($grafico_current as $key => $value) { ?>
current_month.push({ 'x': new Date(<?php echo $value['ano']; ?>,<?php echo $value['mes']; ?>,<?php echo $value['dia']; ?>), 'y': <?php echo $value['total']; ?> });
<?php } ?>
</script>
之后,使用这个新变量设置数据点:
dataPoints: current_month