Array to string conversion while using canvas js in yii2

问题

I am trying to load a chart on my index page in yii2 project. Below is my code

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

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

When I run my code I am getting below error

Array to string conversion

This error comes at dataPoints: <?php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK); ?>

How can I rid of this error? Any help would hi highly appreciated

回答1:

You should encode the php array to json outside the heredoc and supply the output to the javascript part, and you dont use the php tags but use curly braces {} to parse values from the variable inside the heredoc.

See below it should work correctly

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

回答2:

@Faisal, You are passing a String(echo prints anything as strings) in "dataPoints" but its accepts JSON Array.

You need to parse the json string to convert it into a valid JSON. Use JSON.parse() function and modify your code in Javascript as below.

dataPoints: JSON.parse()

Updated:

First take the dataPoints from PHP in a variable before initialising the chart. Then pass this variable within chart configuration. Also try with JSON.parse().

If it still doesn't work, print this new variable in Console and check your output and post that here

来源：https://stackoverflow.com/questions/61280217/array-to-string-conversion-while-using-canvas-js-in-yii2

标签

javascript

yii2

yii2-advanced-app

canvasjs

jsonencoder