Javascript 在yii2中使用canvas js时的数组到字符串转换

Javascript 在yii2中使用canvas js时的数组到字符串转换,javascript,yii2,yii2-advanced-app,canvasjs,jsonencoder,Javascript,Yii2,Yii2 Advanced App,Canvasjs,Jsonencoder,我正试图在yii2项目的索引页上加载图表。下面是我的代码 <?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"

我正试图在
yii2项目的索引页上加载图表。下面是我的代码

<?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)
);
?>
当我运行我的代码时,我发现下面的错误

数组到字符串的转换

此错误出现在
数据点:


我怎样才能消除这个错误?非常感谢您的帮助

@Faisal,您正在“数据点”中传递一个字符串(echo将任何内容打印为字符串),但它接受JSON数组

您需要解析json字符串以将其转换为有效的json。使用JSON.parse()函数并在Javascript中修改代码,如下所示

dataPoints:JSON.parse()

更新:


在初始化图表之前,首先从PHP获取变量中的数据点。然后在图表配置中传递此变量。还可以尝试使用JSON.parse()


如果仍然不起作用,请在控制台中打印这个新变量并检查输出,然后在此处发布

您应该在herdoc外部将php数组编码为json并将输出提供给javascript部分,并且您不使用php标记,而是使用大括号
{}
来解析herdoc内部变量的值

请参见下文,它应该可以正常工作

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


是第一个数据点之前缺少的
:…
是打字错误吗?@AnuragSrivastava添加
不会有任何区别。如果答案对您有效,您可以标记答案。请查看此答案。在初始化图表之前,首先从PHP获取变量中的数据点。然后在图表配置中传递此变量。还可以尝试使用JSON.parse()。如果仍然不起作用,请在控制台中打印这个新变量,检查您的输出,并在此处张贴我不是询问者:)只要指出OP的方法是可能的,您的答案就说明了错误的信息
var dp1=;console.log(dp1)
仍然会给我相同的错误,JSON.parse也是如此
<?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);
?>