dqstti8945
dqstti8945
2016-07-23 20:43

如何使用Chart.js阅读和绘制json

已采纳

I have an html file like this:

<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>

... and a json file like this:

{
    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
    }]
}

... and the json load always fails. I tried several methods to read json and draw chart with Chart.js, but always failed.

I tried to plot the json with php without success:

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

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

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

What's wrong with this?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • douyijin7741 douyijin7741 5年前

    The problem is with the JSON file. You should use quotation marks (").

    Here is the correct JSON file:

    {
        "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
        }]
    }
    
    点赞 评论 复制链接分享
  • dongren4758 dongren4758 5年前

    Please change your PHP to:

    <?php
    header("Content-Type: application/json");
    echo file_get_contents("test.json");
    
    点赞 评论 复制链接分享