如何使用Chart.js读取和绘制JSON

Question

我有一个这样的html文件：

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
function drawChart() {
    console.log("start");
    $.getJSON("test.json", function (data) {
        console.log("loaded");
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });
    }).fail(function(){
        console.log("fail")
    });
}

drawChart()
</script>
</body>

</html>

...和这样的json文件：

{
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [20, 19, 3, 5, 2, 3],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
}

...，并且json加载始终失败。 我尝试了几种方法来读取json并使用Chart.js绘制图表，但始终失败。

我试图用php绘制json失败：

<?php
header("Content-Type: application/json");
$filename = "test.json";
$fp = fopen($filename, "r");

$content = fread($fp, filesize($filename));
explode("\n", $content);

fclose($fp);
print_r($content);
?>

这怎么了

Answer 1

请将您的PHP更改为：

<?php
header("Content-Type: application/json");
echo file_get_contents("test.json");

Answer 2

问题出在JSON文件上。 您应该使用引号（“）。

这是正确的JSON文件：

{
    "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    "datasets": [{
        "label": "# of Votes",
        "data": [20, 19, 3, 5, 2, 3],
        "backgroundColor": [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
        ],
        "borderColor": [
            "rgba(255,99,132,1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
        ],
        "borderWidth": 1
    }]
}