javascript - 如何将数据从 php 传递到 Chart.js

Question

我有一个包含以下内容的 PHP 数组:

[{"label":"Baden-Wuerttemberg","year":"1998","ins":"243812"}...] (34 entries).

现在我想在JS中使用Chart.js绘制图表，但不知道如何获取Labels和dataset的值。

这是我尝试过的:

var jsArray = <?php echo json_encode($jsonArray); ?>;

    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "My First Chart in CanvasJS"
        },
        type: 'line',
        data: {
            datasets: jsArray
        },

    });
    chart.render();
}

我想在x轴上绘制Jahr年份，在y轴上绘制ins总数>.

Answer 1

json_encode 函数返回 json 编码的字符串，但在 Chart.js 中您需要 json 对象。您只需要将字符串解析为 JavaScript 部分中的对象，如下所示:

var jsArray = JSON.parse('<?php echo json_encode($jsonArray); ?>');

这应该有效!

<小时/>

更新

根据 Chart.js 文档，dataPoints 中的每个单个对象都可以具有以下属性:

{
    "label": "string, will appear if hovered the bar",
    "x": 10, // must be a number
    "y": 20 // must be a number
}

因此您需要将数据转换为上述格式，如下所示:

$formattedData = [];
foreach( $jsonArray as $data ) {
    $formattedData[] = [
        "label" => $data->Bundesland,
        "x"     => (int) $data->label,
        "y"     => (int) $data->sum
    ];
}

然后最后像这样使用$formattedData:

var jsArray = JSON.parse('<?php echo json_encode($formattedData); ?>');

js部分没有其他问题，只是数据格式有问题。