在用highchart 的时候遇到了问题:
下图是数据库查询的结果,需展现在 页面上,value对应Y轴,day(日期)对应X轴
可是我用json获取数据展示的时候,出问题了,如下图,就是X轴显示成了数据库查询出来的列名(即0,1,0,1,0...),而并没有显示的是day(日期),它显示到了Y轴上去了,如何解决?
js代码
var xset = [];//X轴数据集 var yset = [];//Y轴数据集 function getData(){ $.getJSON("${pageContext.request.contextPath}/month!getMonthList.action",function(data){ $.each(data,function(i,item){ $.each(item,function(k,v){ xset.push(k); yset.push(v); }); }); showChart(xset,yset); }); }
chart代码
function showChart(xset,yset){ $('#container') .highcharts( { credits: { enabled: false //去掉highcharts网站url } , chart : { type : 'column', margin : [ 50, 50, 50, 50 ] }, title : { text : 'this is a test' }, xAxis : { categories : xset, /* labels : { /* rotation: -0, align: 'right', style : { fontSize : '13px', fontFamily : 'Verdana, sans-serif' } } */ }, yAxis : { min : 0, title : { text : 'value(SVG)' } }, legend : { enabled : false }, tooltip : { pointFormat : 'value: <b>{point.y:.1f} SVG</b>', }, series : [ { name : 'Population', data : yset, dataLabels : { enabled : true, rotation : -0, color : 'black', //align: 'right', //x : 4, //y : 10, style : { fontSize : '13px', fontFamily : 'Verdana, sans-serif', textShadow : '0 0 3px black' } } } ] }); } getData();
各位帮忙看一下,
相关推荐
最近做HightCharts,需要从后台获取数据。但是网上的例子互相抄袭,多数是后台...本例子是用asp.net webform实现后台获取Json数据,同时展示为HighCharts饼图。相信聪明的你能够同样写出mvc或者其他图标的模拟代码。
本人自己封装的jquery工具类,highChart工具类。用于动态创建highChart图表对象。方便扩展,使用
用于highcharts以及echarts的地图geojson数据,包含成都天府新区,高新南区,高新东区,高新西区
Highcharts实现的json提供数据的波浪线的实例
highchart
highchart
highchart中文帮助文档
用highcharts实现从mysql数据库获取数据生成实时折线图。开发平台是用eclipse实现的,是一个项目,用jsp显示从数据库读取的实时折线图。
本实例源码 Highchart Demo主要讲述了使用Highchart制作图表的用法。 包括一些js配置以及接收数据格式
多个highchart带翻页Demo
HighChart
highchart api highchart api highchart api highchart api
highchart api 文档 。包含所有highchart属性。 属性结构很清晰,方便查找。
获取Highcharts图表对象的方法汇总
highchart的一个例子
关于highchart的一个简单应用,数据库很简单,只有id列和数据列,希望能对大家有帮助
highChart gauge
matlab开发-HighChart。使用Matlab的Web浏览器可以轻松使用动态和交互式图表。
JSON与HighChart.JS的兼容性将High-Scale JSON数据集转换为HighChart可绘制(x,y)坐标格式。 可以对x,y轴进行计算(例如:将exitTime-InTime分配给y轴) 改变X轴的起点运行应用程序克隆存储库并导航到该存储库。 ...
本实例源码 Highchart Demo主要讲述了使用Highchart制作图表的用法。 包括一些js配置以及接收数据格式