javascript - 如何使用 JSON 数据创建 CanvasJS 图表？

Question

我创建了一个测试图表，它运行良好。我想通过 ajax 获取我的数据，而不是嵌入到网页中。我想我需要格式化我的 dataPoints 数组 ({ x: new Date(2009, 0), y: 15 },) 以便它们可以在外部 JSON 文件中使用。在我的示例中，填充图表的数据格式为:

My JSChart Fiddle Example

{
  name: "File Sharing",
  showInLegend: true,
  type: "stackedColumn100",
  color: "#4192D9 ",
  indexLabel: "{y}",
  dataPoints: [
    { x: new Date(2009, 0), y: 15 },
    { x: new Date(2010, 0), y: 15 },
    { x: new Date(2011, 0), y: 12 },
    { x: new Date(2012, 0), y: 10 },
    { x: new Date(2013, 0), y: 12 },
    { x: new Date(2014, 0), y: 10 }
  ]
},

我查看了 Canvas JS 站点，他们使用了以下 Ajax 调用示例:

var dataPoints = [];
$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=100&type=json", function(data) {  
    $.each(data, function(key, value){
        dataPoints.push({x: value[0], y: parseInt(value[1])});
    });
    var chart = new CanvasJS.Chart("chartContainer",{
        title:{
            text:"Rendering Chart with dataPoints from External JSON"
        },
        data: [{
        type: "line",
            dataPoints : dataPoints,
        }]
    });
    chart.render();
});

不确定这是否有所不同，但上面的 AJAX 调用中使用的 JSON 数据的格式是:

[[1,12],[2,7],[3,6],[4,6],[5,9],[6,13],[7,12],[ 8,15],[9,14],[10,18]]

Answer 1

编辑
https://jsfiddle.net/uvac6rdz/2/
具有经过编辑的数据格式以匹配 OP 的首选 axisX。

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Composition of Internet Traffic in North America",
    horizontalAlign: "right"
  },
  axisX: {
    tickThickness: 0,
    interval: 1,
    intervalType: "year"
  },
  animationEnabled: true,
  toolTip: {
    shared: true
  },
  axisY: {
    lineThickness: 0,
    tickThickness: 0,
    interval: 20
  },
  legend: {
    verticalAlign: "center",
    horizontalAlign: "left"
  },

  data: [
  {
    name: "Real-Time",
    showInLegend: true,
    type: "column",
    color: "#004B8D ",
    indexLabel: "{y}",
    dataPoints: [
    { x: new Date(2009,0), y: 12 },
    { x: new Date(2010,0), y: 7 },
    { x: new Date(2011,0), y: 6}, 
    { x: new Date(2012,0), y: 6}, 
    { x: new Date(2013,0), y: 9}, 
    { x: new Date(2014,0), y: 13}, 
    { x: new Date(2015,0), y: 12}, 
    { x: new Date(2016,0), y: 15}, 
    { x: new Date(2017,0), y: 14}
    ]
  },

  ]
});

chart.render();

我更改了以下内容:

1. axisX.intervalType 上的类型从 "year" 到 "number"
   (由于您的示例数据)。

2. 格式化来自 [[1,12],[2,7]... 的样本数据以供引用
   [{x: 1, y: 12}, {x: 2, y: 7},...

3. 图表类型从 stackedColumn100 到 column。

查看 canvasJS 的文档，示例要求您将数据格式化为以下内容:{x: valueX, y: valueY}