-1

我正在尝试在我的索引页面上加载图表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); ?>

我怎样才能摆脱这个错误？任何帮助将不胜感激

4

2 回答 2

1

您应该在 heredoc 之外将 php 数组编码为 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);
?>
于 2020-04-18T05:20:05.527 回答
0

@Faisal，您正在“dataPoints”中传递一个字符串（回显将任何内容打印为字符串），但它接受 JSON 数组。

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

数据点：JSON.parse()

更新：

在初始化图表之前，首先将 PHP 中的 dataPoints 放入一个变量中。然后在图表配置中传递这个变量。也尝试使用 JSON.parse()。

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

于 2020-04-17T20:41:29.807 回答