Json数据到canvasjs不起作用

时间:2018-01-19 04:27:42

标签: javascript json ajax canvasjs

我想通过ajax使用此代码获取json数据,它使用原始源代码中的其他json数据,但它不能处理我的json数据,我想念什么?请帮忙,谢谢

$(document).ready(function() {
  var dataPointsA = []
  var dataPointsB = []

  $.ajax({
    type: 'GET',
    url: 'https://api.myjson.com/bins/1fp11x',
    dataType: 'json',
    success: function(field) {
      for (var i = 0; i < field.length; i++) {
        dataPointsA.push({
          x: field[i].day,
          y: field[i].impressions
        });
        dataPointsB.push({
          x: field[i].day,
          y: field[i].money
        });
      }


      var chart = new CanvasJS.Chart("chartContainer", {
        title: {
          text: "JSON from External File"
        },

        data: [{
          type: "line",
          name: "line1",
          dataPoints: dataPointsA
        }, {
          type: "line",
          name: "line2",
          dataPoints: dataPointsB
        }, ]
      });

      chart.render();

    }
  });
})

1 个答案:

答案 0 :(得分:0)

你忘了从json api中选择stats字段。 此外,需要为图表格式化字段。 PS:图表并不漂亮。你可能不得不重新考虑它。

$(document).ready(function() {
  var dataPointsA = []
  var dataPointsB = []

  $.ajax({
    type: 'GET',
    url: 'https://api.myjson.com/bins/1fp11x',
    dataType: 'json',
    success: function(field) {
    field = field.stats;
      for (var i = 0; i < field.length; i++) {
        
        dataPointsA.push({
          x: new Date(field[i].day),
          y: parseInt(field[i].impressions)
        });
        dataPointsB.push({
          x: new Date(field[i].day),
          y: parseInt(field[i].money)
        });
      }


      var chart = new CanvasJS.Chart("chartContainer", {
        title: {
          text: "JSON from External File"
        },

        data: [{
          type: "line",
          name: "line1",
          dataPoints: dataPointsA
        }, {
          type: "line",
          name: "line2",
          dataPoints: dataPointsB
        }, ]
      });
      
      chart.render();

    }
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>