[英]How do I create a CanvasJS Chart using JSON data?
I created a test chart and it works fine. 我创建了一个测试图,它工作正常。 I would like to fetch my data via ajax rather than embedding in the web page. 我想通过Ajax来获取数据,而不是将其嵌入网页中。 I figure that I need to format my dataPoints arrays ( { x: new Date(2009, 0), y: 15 },
) so that they can be used in an external JSON file. 我认为需要格式化dataPoints数组( { x: new Date(2009, 0), y: 15 },
2009,0 { x: new Date(2009, 0), y: 15 },
),以便可以在外部JSON文件中使用它们。 In my example the format of the data that populates my chart is: 在我的示例中,填充我的图表的数据格式为:
My JSChart Fiddle Example 我的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 }
]
},
I looked on the Canvas JS site and they used the following Ajax call example: 我查看了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();
});
Not sure if this makes a difference but the format of the JSON data that is used in the AJAX call above is: 不知道这是否有所不同,但是上述AJAX调用中使用的JSON数据格式为:
[[1,12],[2,7],[3,6],[4,6],[5,9],[6,13],[7,12],[8,15],[9,14],[10,18]]
EDIT 编辑
https://jsfiddle.net/uvac6rdz/2/ https://jsfiddle.net/uvac6rdz/2/
with edited data format to match OP's preferred axisX. 具有经过编辑的数据格式以匹配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();
I changed the following: 我更改了以下内容:
the type on your axisX.intervalType
from "year"
to "number"
axisX.intervalType
上的类型从"year"
到"number"
(due to your sample data). (由于您的示例数据)。
formatted your sample data from [[1,12],[2,7]...
to follow 从[[1,12],[2,7]...
格式化您的样本数据
[{x: 1, y: 12}, {x: 2, y: 7},...
chart type from stackedColumn100
to column
. 图表类型从stackedColumn100
到column
。
Looking at the documentation for canvasJS, the sample requires you to format the data to be following: {x: valueX, y: valueY}
查看canvasJS的文档,该示例要求您将数据格式化为以下格式: {x: valueX, y: valueY}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.