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

Question

我创建了一个测试图表,它工作正常.我想通过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]]

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.intervalTypefrom "year"到的类型"number"
   (由于您的示例数据).

2. 格式化您的样本数据[[1,12],[2,7]...以遵循
   [{x: 1, y: 12}, {x: 2, y: 7},...

3. 图表类型从.stackedColumn100到column.

查看canvasJS的文档,该示例要求您格式化要遵循的数据: {x: valueX, y: valueY}