`
mingnianshimanian
  • 浏览: 40324 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

遇到一个highchart 获取json数据展现问题

阅读更多

在用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();

 
 各位帮忙看一下,

  • 大小: 17.5 KB
  • 大小: 46 KB
0
1
分享到:
评论
3 楼 mingnianshimanian 2014-03-12  
hanchilin 写道
如果json数据是{[day,value]}的话,不需要分xy轴,直接放到series的data里

怎么把传过来的json串 弄成[day,value]呢
2 楼 hanchilin 2014-03-12  
如果json数据是{[day,value]}的话,不需要分xy轴,直接放到series的data里
1 楼 hanchilin 2014-03-12  
查看一下你的json数据,用$.each(item,function(k,v){ xset.push(k);  yset.push(v);});解析的item数据格式应该是[{0:valu,1:day}],所以就成了两组数据

相关推荐

    highChart后台动态获取数据

    HighCharts是一款强大的...通过以上知识点,我们可以创建一个能够从后台动态获取数据的HighCharts图表,提供实时更新和用户交互功能。这在数据分析、监控系统等领域非常有用,能直观地展示和理解大量复杂数据。

    HighCharts 后台取Json数据--asp.net版源码

    最近做HightCharts,需要从后台获取数据。但是网上的例子互相抄袭,多数是后台...本例子是用asp.net webform实现后台获取Json数据,同时展示为HighCharts饼图。相信聪明的你能够同样写出mvc或者其他图标的模拟代码。

    Highcharts json

    JSON数据通常以数组形式存在,每个元素代表一个数据点,包含x轴和y轴的值。例如: ```json [ {x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 1}, ... ] ``` 在Highcharts中,我们可以使用`$.getJSON`或`fetch`等方法...

    matlab开发-HighChart

    这段代码首先定义了一个数据数组,然后将其转换为JSON格式,接着创建一个HTML文件并插入HighChart的JavaScript库和初始化图表的代码。最后,`web`函数打开这个HTML页面,显示了由MATLAB数据驱动的HighChart图表。 ...

    echarts highcharts 成都地图数据 geojson

    用于highcharts以及echarts的地图geojson数据,包含成都天府新区,高新南区,高新东区,高新西区

    HighChart API

    4. **数据加载**: 数据可以通过配置对象的`series`属性直接提供,也可以通过异步加载,例如从服务器获取JSON数据后动态添加。 5. **图表属性和选项**:HighChart API提供了大量的配置选项,包括颜色、标题、轴、...

    Highchart Demo

    Highcharts是一款强大的JavaScript...总之,"Highchart Demo"实例是一个学习和理解Highcharts图表库的好材料,通过它,你可以掌握如何使用JavaScript和Highcharts来创建专业级的数据图表,提升你的Web应用的用户体验。

    highcharts实现从mysql数据库获取数据生成折线图

    在Eclipse中,你可以创建一个Servlet或者JSP页面来获取数据库中的实时数据。 ```java import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.Statement; ...

    关于highchart的一个简单应用

    在这个“关于Highchart的一个简单应用”中,我们将探讨如何使用Highcharts库来创建一个基础的图表,以及如何从简单的数据库中获取数据并展示。 首先,我们需要了解Highcharts的基本结构。Highcharts的核心是`...

    highchart c# demo

    例如,一个简单的柱状图初始化代码可能如下: ```html &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt; &lt;div id="container"&gt;&lt;/div&gt; Highcharts.chart('container', { chart: { type: '...

    HighChart

    此外,HighChart还支持组合图表,可以将多种类型的图表混合在一个图表区域中,使得数据展示更为立体。 在使用HighChart时,开发者首先需要在HTML中引入HighChart的JavaScript库,然后通过JavaScript代码配置图表的...

    Struts2+HighChart+Jquery远程加载 折线图

    2. `$.getJSON()`则是`$.ajax()`的一个简化版本,专门用于获取JSON格式的数据。它可以快速方便地从服务器拉取数据并自动进行JSON解析。 在Struts2 Action中,你需要创建一个方法来处理请求并返回JSON数据。由于我们...

    关于highchart的一个学习例子

    - **配置对象**:Highcharts通过一个JSON格式的配置对象来定义图表的各种属性,如标题、数据系列、轴设置、颜色等。 - **图表类型**:Highcharts支持多种图表类型,如折线图(line)、面积图(areaspline)等。在...

    highchart

    `series`数组中包含多个对象,每个对象代表一个数据系列。每个系列有`name`(名称)、`data`(数据数组)和`type`(类型,如'line'、'column'等)等属性。数据可以是简单的数值数组,也可以是复杂的对象,包含额外...

    2021最新成都geojson数据,含高新区、天府新区、东部新区

    压缩包内的"highchart调用实例"提供了一个使用Highcharts进行地图展示的参考,帮助开发者快速上手。 2. **数据分析**:通过解析GeoJSON数据,你可以对成都的区域划分进行统计分析,例如计算各区域面积、人口密度或...

    HighChart曲线图

    1. **HighChart简介**:HighChart是一个基于纯JavaScript的图表库,它允许开发者通过简单的API创建出高质量、动态的数据可视化图表。HighChart支持多种图表类型,如折线图、柱状图、饼图、散点图等,曲线图是其中一...

    多个highchart带翻页Demo

    在这个"多个highchart带翻页Demo"中,我们将探讨如何利用Highcharts来构建一个包含多张图表并具有翻页功能的示例。 首先,我们需要了解Highcharts的基本用法。Highcharts的核心是`Highcharts.Chart`对象,通过这个...

    引用:highChart控件不错,挺漂亮

    总之,HighChart是一个强大且灵活的数据可视化工具,无论是初学者还是经验丰富的开发者,都能从中找到适合自己的解决方案。通过深入学习和实践,我们可以利用HighChart创建出既美观又实用的数据展示应用,提升用户...

    highchart源码及实例

    数据可以硬编码在配置对象中,也可以动态从服务器获取。动态加载数据通常使用AJAX请求,例如使用jQuery的`$.getJSON()`方法。 五、交互功能 Highcharts支持多种交互功能,如点击事件、鼠标悬停提示、缩放、平移等。...

    java实现的highcharts与ajax结合动态实时获取数据更新图表

    例如,使用Spring MVC,你可能需要创建一个Controller方法: ```java @RequestMapping(value = "/getData", method = RequestMethod.GET) @ResponseBody public Map, Object&gt; getData() { // 查询数据 List...

Global site tag (gtag.js) - Google Analytics