我正在尝试在yii2 project
的索引页面中加载图表。下面是我的代码
<?PHP
$dataPoints1 = array(
array("label"=> "2010", "y"=> 36.12),
array("label"=> "2011", "y"=> 34.87),
array("label"=> "2012", "y"=> 40.30),
array("label"=> "2013", "y"=> 35.30),
array("label"=> "2014", "y"=> 39.50),
array("label"=> "2015", "y"=> 50.82),
array("label"=> "2016", "y"=> 74.70)
);
$dataPoints2 = array(
array("label"=> "2010", "y"=> 64.61),
array("label"=> "2011", "y"=> 70.55),
array("label"=> "2012", "y"=> 72.50),
array("label"=> "2013", "y"=> 81.30),
array("label"=> "2014", "y"=> 63.60),
array("label"=> "2015", "y"=> 69.38),
array("label"=> "2016", "y"=> 98.70)
);
?>
我的JS
<?PHP
$script = <<< JS
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer1", {
animationEnabled: true,
theme: "light2",
title:{
text: "Average Amount Spent on Real and Artificial X-Mas Trees in U.S."
},
legend:{
cursor: "pointer",
verticalAlign: "center",
horizontalAlign: "right",
itemclick: toggleDataSeries
},
data: [{
type: "column",
name: "Real Trees",
indexLabel: "{y}",
yValueFormatString: "$#0.##",
showInLegend: true
dataPoints: <?php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK); ?>
},{
type: "column",
name: "Artificial Trees",
indexLabel: "{y}",
yValueFormatString: "$#0.##",
showInLegend: true,
dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();
function toggleDataSeries(e){
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else{
e.dataSeries.visible = true;
}
chart.render();
}
}
JS;
$this->registerJs($script);
?>
当我运行我的代码时,我得到以下错误
数组到字符串的转换
此错误来自dataPoints: <?php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK); ?>
如何消除此错误?任何帮助将不胜感激
@@ Faisal,您在“ dataPoints”中传递了一个String(echo将任何内容打印为字符串),但是它接受JSON数组。
您需要解析json字符串以将其转换为有效的JSON。使用JSON.parse()函数,并按照以下方式在Javascript中修改您的代码。
dataPoints:JSON.parse()
已更新:
在初始化图表之前,首先将PHP中的dataPoints放入变量中。然后在图表配置中传递此变量。还可以尝试使用JSON.parse()。
如果仍然不起作用,请在控制台中打印此新变量,然后检查您的输出并将其发布在此处
[您应将php数组编码为Heredoc外部的json,并将输出提供给javascript部分,并且您不使用php标签,而是使用花括号{}
来解析来自Heredoc内部变量的值。
请参见下文,它应能正常工作
<?PHP
$dataPoints1 = json_encode($dataPoints1, JSON_NUMERIC_CHECK);
$dataPoints2 = json_encode($dataPoints1, JSON_NUMERIC_CHECK);
$script = <<< JS
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer1", {
animationEnabled: true,
theme: "light2",
title:{
text: "Average Amount Spent on Real and Artificial X-Mas Trees in U.S."
},
legend:{
cursor: "pointer",
verticalAlign: "center",
horizontalAlign: "right",
itemclick: toggleDataSeries
},
data: [{
type: "column",
name: "Real Trees",
indexLabel: "{y}",
yValueFormatString: "$#0.##",
showInLegend: true
dataPoints: {$dataPoints1}
},{
type: "column",
name: "Artificial Trees",
indexLabel: "{y}",
yValueFormatString: "$#0.##",
showInLegend: true,
dataPoints: {$dataPoints2}
}]
});
chart.render();
function toggleDataSeries(e){
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else{
e.dataSeries.visible = true;
}
chart.render();
}
}
JS;
$this->registerJs($script);
?>