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

debugcn 发表于 Dev

打屁股

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

我的 JSChart 小提琴示例

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

丹尼斯·蔡

使用编辑过的数据格式编辑
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();

我更改了以下内容：