Преобразование массива в строку при использовании canvas js в yii2

Я пытаюсь загрузить диаграмму на моей индексной странице в 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)
);
?>

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

Когда я запускаю свой код, я получаю ошибку ниже

Преобразование массива в строку

Эта ошибка появляется на dataPoints: <?php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK); ?>

Как я могу избавиться от этой ошибки? Любая помощь будет приветствоваться


javascript yii2 yii2-advanced-app canvasjs jsonencoder
person Moeez    schedule 17.04.2020    source источник
comment
Является ли отсутствие , перед первым dataPoints:.. опечаткой?   -  person Anurag Srivastava    schedule 17.04.2020
comment
@AnuragSrivastava добавление , ничего не изменит   -  person Moeez    schedule 18.04.2020
comment
можете ли вы отметить ответ, если он сработал для вас   -  person Muhammad Omer Aslam    schedule 22.04.2020

Ответы (2)


arrow_upward
1
arrow_downward

Вы должны закодировать массив php в json вне heredoc и передать вывод в часть 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);
?>
person Muhammad Omer Aslam    schedule 18.04.2020

arrow_upward
0
arrow_downward

@Faisal, вы передаете строку (эхо печатает что-либо в виде строк) в «dataPoints», но она принимает массив JSON.

Вам нужно проанализировать строку json, чтобы преобразовать ее в действительный JSON. Используйте функцию JSON.parse() и измените свой код в Javascript, как показано ниже.

точки данных: JSON.parse()

Обновлено:

Сначала возьмите dataPoints из PHP в переменную, прежде чем инициализировать диаграмму. Затем передайте эту переменную в конфигурации диаграммы. Также попробуйте с JSON.parse().

Если это все еще не работает, распечатайте эту новую переменную в консоли, проверьте свой вывод и опубликуйте его здесь.

person Ashwani Garg    schedule 17.04.2020
comment
Посмотрите этот ответ, пожалуйста. stackoverflow.com/a/21153859/7867822 - person Anurag Srivastava; 17.04.2020
comment
Сначала возьмите dataPoints из PHP в переменную, прежде чем инициализировать диаграмму. Затем передайте эту переменную в конфигурации диаграммы. Также попробуйте с JSON.parse(). Если это все еще не работает, распечатайте эту новую переменную в консоли, проверьте свой вывод и опубликуйте его здесь. - person Ashwani Garg; 17.04.2020
comment
Я не спрашиваю :) Просто указав, что метод OP возможен, в вашем ответе указана неверная информация. - person Anurag Srivastava; 17.04.2020
comment
var dp1 = <?php echo json_encode( $dataPoints1 ) ?>; console.log(dp1); по-прежнему выдает ту же ошибку - person Moeez; 18.04.2020
comment
то же самое и с JSON.parse - person Moeez; 18.04.2020