如何通过json数据动态获取基线highchart
how to get basic line highchart dynamically through json data
我的json数据是:
{"09/02/2014 15:36:25":[33.82,33.42,40.83],"08/11/2014 16:25:15":[36.6,33.42,40.45],"07/30/2014 08:43:57":[0.0,0.0,0.0],"08/12/2014 22:00:52":[77.99,74.1,80.12],"08/12/2014 21:19:48":[56.91,63.23,52.42],"07/23/2014 13:37:46":[0.0,0.0,0.0],"08/11/2014 17:35:21":[40.9,43.83,38.34]}
我想把这些数据放在高图表的基本折线图中,我想把日期放在x轴上,把数据放在y轴上。例如:x轴日期:2014年2月9日15:36:25数据用于y轴:33.82,33.42,40.83(用于三条不同的线,如数据1、数据2、数据3)
对于手动生成的图形,我使用了:http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/
如何从上面的json数据中动态生成图形
您首先需要从JSON数据中获取值,如:
Object.keys(data); //this will return dates
data[xAxis[0]]; //this gives the values corresponding to each date (currently first date)
然后你需要用这些值动态地填充图表:
var chart = $("#container").highcharts();
for(var i=0; i<xAxis.length; i++) {
chart.addSeries({
name: xAxis[i],
data: data[xAxis[i]]
});
}
顺便说一句,你不能在xAxis上显示日期,因为每个数据值都有3个点,但如果你把日期放在x轴类别中,它们会更多。逻辑表示将每个日期显示为单独的系列,就像我在示例中所做的那样。
请参阅此处的演示
相关文章:
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- jquery试图按名称获取按钮位置
- 如何在jQuery中获取元素的形式
- 如何在php文件中获取$.post-ajax传递的值
- 在Shopify中获取博客文章的图片
- 使用Javascript获取所选选项ID
- 在jQuery中获取表的行索引
- 使用jquery将mysql数据获取到新的表行中
- 在动态创建的元素上获取对特定选择器的引用
- 从城市名称获取惊喜
- Angular只从数组中获取所需的数据
- 无法将数据从firebase获取到我的html页面
- 从ajax请求中获取javascript对象
- 如何从画布上的某个移动事件中获取X和Y
- 是否有一个JS/jQuery函数可以获取某个类的每个元素的ID
- 如何在PHP中使用$_POST获取Select元素值
- 获取@ResponseBody的一部分作为主干和Spring MVC控制器之间的参数
- 纸张.js PointText 获取基线坐标而不是左下角
- Open Layers 3获取谷歌地图基线层
- 如何通过json数据动态获取基线highchart