在用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();
各位帮忙看一下,
相关推荐
HighCharts是一款强大的...通过以上知识点,我们可以创建一个能够从后台动态获取数据的HighCharts图表,提供实时更新和用户交互功能。这在数据分析、监控系统等领域非常有用,能直观地展示和理解大量复杂数据。
最近做HightCharts,需要从后台获取数据。但是网上的例子互相抄袭,多数是后台...本例子是用asp.net webform实现后台获取Json数据,同时展示为HighCharts饼图。相信聪明的你能够同样写出mvc或者其他图标的模拟代码。
JSON数据通常以数组形式存在,每个元素代表一个数据点,包含x轴和y轴的值。例如: ```json [ {x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 1}, ... ] ``` 在Highcharts中,我们可以使用`$.getJSON`或`fetch`等方法...
这段代码首先定义了一个数据数组,然后将其转换为JSON格式,接着创建一个HTML文件并插入HighChart的JavaScript库和初始化图表的代码。最后,`web`函数打开这个HTML页面,显示了由MATLAB数据驱动的HighChart图表。 ...
用于highcharts以及echarts的地图geojson数据,包含成都天府新区,高新南区,高新东区,高新西区
4. **数据加载**: 数据可以通过配置对象的`series`属性直接提供,也可以通过异步加载,例如从服务器获取JSON数据后动态添加。 5. **图表属性和选项**:HighChart API提供了大量的配置选项,包括颜色、标题、轴、...
Highcharts是一款强大的JavaScript...总之,"Highchart Demo"实例是一个学习和理解Highcharts图表库的好材料,通过它,你可以掌握如何使用JavaScript和Highcharts来创建专业级的数据图表,提升你的Web应用的用户体验。
在Eclipse中,你可以创建一个Servlet或者JSP页面来获取数据库中的实时数据。 ```java import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.Statement; ...
在这个“关于Highchart的一个简单应用”中,我们将探讨如何使用Highcharts库来创建一个基础的图表,以及如何从简单的数据库中获取数据并展示。 首先,我们需要了解Highcharts的基本结构。Highcharts的核心是`...
例如,一个简单的柱状图初始化代码可能如下: ```html <script src="https://code.highcharts.com/highcharts.js"></script> <div id="container"></div> Highcharts.chart('container', { chart: { type: '...
此外,HighChart还支持组合图表,可以将多种类型的图表混合在一个图表区域中,使得数据展示更为立体。 在使用HighChart时,开发者首先需要在HTML中引入HighChart的JavaScript库,然后通过JavaScript代码配置图表的...
2. `$.getJSON()`则是`$.ajax()`的一个简化版本,专门用于获取JSON格式的数据。它可以快速方便地从服务器拉取数据并自动进行JSON解析。 在Struts2 Action中,你需要创建一个方法来处理请求并返回JSON数据。由于我们...
- **配置对象**:Highcharts通过一个JSON格式的配置对象来定义图表的各种属性,如标题、数据系列、轴设置、颜色等。 - **图表类型**:Highcharts支持多种图表类型,如折线图(line)、面积图(areaspline)等。在...
`series`数组中包含多个对象,每个对象代表一个数据系列。每个系列有`name`(名称)、`data`(数据数组)和`type`(类型,如'line'、'column'等)等属性。数据可以是简单的数值数组,也可以是复杂的对象,包含额外...
压缩包内的"highchart调用实例"提供了一个使用Highcharts进行地图展示的参考,帮助开发者快速上手。 2. **数据分析**:通过解析GeoJSON数据,你可以对成都的区域划分进行统计分析,例如计算各区域面积、人口密度或...
1. **HighChart简介**:HighChart是一个基于纯JavaScript的图表库,它允许开发者通过简单的API创建出高质量、动态的数据可视化图表。HighChart支持多种图表类型,如折线图、柱状图、饼图、散点图等,曲线图是其中一...
在这个"多个highchart带翻页Demo"中,我们将探讨如何利用Highcharts来构建一个包含多张图表并具有翻页功能的示例。 首先,我们需要了解Highcharts的基本用法。Highcharts的核心是`Highcharts.Chart`对象,通过这个...
总之,HighChart是一个强大且灵活的数据可视化工具,无论是初学者还是经验丰富的开发者,都能从中找到适合自己的解决方案。通过深入学习和实践,我们可以利用HighChart创建出既美观又实用的数据展示应用,提升用户...
数据可以硬编码在配置对象中,也可以动态从服务器获取。动态加载数据通常使用AJAX请求,例如使用jQuery的`$.getJSON()`方法。 五、交互功能 Highcharts支持多种交互功能,如点击事件、鼠标悬停提示、缩放、平移等。...
例如,使用Spring MVC,你可能需要创建一个Controller方法: ```java @RequestMapping(value = "/getData", method = RequestMethod.GET) @ResponseBody public Map, Object> getData() { // 查询数据 List...