douyi4991 2017-11-29 22:19
浏览 106

charts.js - json输出到图表

I want to dispay in a bar graph the days and the quantity. I have following json output.(data.php) for each day the quantity.

[{"day":"2017-11-15","quantity":"72"},{"day":"2017-11-16","quantity":"157"},{"day":"2017-11-17","quantity":"130"},{"day":"2017-11-18","quantity":"91"},{"day":"2017-11-19","quantity":"96"}]

output.html

 <!DOCTYPE html>
 <html>
 <head>
 <title>ChartJS - BarGraph</title>
     <style type="text/css">
        #chart-container {
            width: 640px;
            height: auto;
        }
    </style>
</head>
<body>
    <div id="chart-container">
        <canvas id="mycanvas"></canvas>
    </div>

    <!-- javascript -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/Chart.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</body>

and thats the app.js

$(document).ready(function(){
$.ajax({
    url: "data.php",
    method: "GET",
    success: function(data) {
        console.log(data);
        var day = [];
        var quantity = [];

        for(var i in data) {
            day.push(data[i].day);
            quantity.push(data[i].quantity);
        }

        var chartdata = {
            labels: day,
            datasets : [
                {
                    label: 'DAYS',
                    backgroundColor: 'rgba(200, 200, 200, 0.75)',
                    borderColor: 'rgba(200, 200, 200, 0.75)',
                    hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                    hoverBorderColor: 'rgba(200, 200, 200, 1)',
                    data: quantity
                }
            ]
        };

        var ctx = $("#mycanvas");

        var barGraph = new Chart(ctx, {
            type: 'bar',
            data: chartdata
        });
    },
    error: function(data) {
        console.log(data);
    }
});
});

but it's always empty. but why? Any idea? Also instead of the day theres only undefined on the bottom line.

  • 写回答

2条回答 默认 最新

  • dongzi0857 2017-11-30 00:19
    关注

    Here is the main idea

    data.forEach(function(packet) {

  labelsData.push(packet.day);
  datasetData.push(parseFloat(packet.quantity));

});

    for example

    var dataJSON = [{
  "day": "2017-11-15",
  "quantity": "72"
}, {
  "day": "2017-11-16",
  "quantity": "157"
}, {
  "day": "2017-11-17",
  "quantity": "130"
}, {
  "day": "2017-11-18",
  "quantity": "91"
}, {
  "day": "2017-11-19",
  "quantity": "96"
}];

var labelsData = [];
var datasetData = [];

dataJSON.forEach(function(packet) {

  labelsData.push(packet.day);
  datasetData.push(parseFloat(packet.quantity));

});

var chartdata = {
  type: 'bar',
  data: {
    labels: labelsData,
    datasets: [{
      label: 'DAYS',
      data: datasetData
    }]
  }
}

    Working JSFiddle

    https://jsfiddle.net/4v3nt7sL/1/

    评论

报告相同问题？

悬赏问题

  • ¥15 目详情-五一模拟赛详情页
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看
  • ¥15 关于#Java#的问题，如何解决？
  • ¥15 加热介质是液体，换热器壳侧导热系数和总的导热系数怎么算
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line