使用Chart.js中的JSON文件数据

Using JSON file data in Chart.js

本文关键字：文件 数据 JSON 中的 Chart js 使用      更新时间：2023-09-26

javascript是一个全新的概念。我正在尝试读取位于本地主机上的JSON文件(http://localhost:8080/jsonData.json)并使用Chart.js对其进行格式化以进行显示。

这是我的JSON文件：

[{"date": "1/02/16", "price":15.25},
{"date":"29/01/16", "price":15.35},
{"date":"28/01/16", "price":15.1}]

和我的html文件，它将显示图表：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Chart</title>
<script src="javascript/Chart.js"></script>
</head>
<body>
<canvas id="mycanvas" width="400" height="400"></canvas>
<script>
$.getJSON( "http://localhost:8080/jsonData.json", function( data ) {
    var chartjsData = [];
    var labels = [];
    $.each( data, function( key, val ) {
        labels.push(key);
        chartjsData.push(val);
      });
    var lineChartData = {
        labels : labels,
        datasets : [{
            fillColor : "rgba(220,280,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            data : chartjsData
        }]
    };
    var myLine = new Chart(document.getElementById("mycanvas").getContext("2d")).Line(lineChartData);
});
</script>
</body>
</html>

基本上，当我运行它时，我只会得到一个空白屏幕，没有显示任何内容，所以我猜这与我如何解析文件有关，任何帮助都将不胜感激。

该txt文件中的JSON不是有效的JSON对象。你需要使用这样的常规报价：

[{"date": "1/02/16", "price":15.25},
{"date":"29/01/16", "price":15.35},
{"date":"28/01/16", "price":15.1}];

您也可以在这里使用jQuery的$.getJSON函数：

var myJSON = $.getJSON( "example.json", function() {
  console.log( "success" );
})

请参见此处：http://api.jquery.com/jquery.getjson/

相关文章：