以前做过highcharts生成曲线图的功能,但是那只是知道固定的X轴和Y轴固定的。只有一对,所以传过来的数据比较好处理。但是如果有多个Y轴数据呢?我们改如何处理?这就需要highcharts动态生成曲线图。
看代码:
后台代码:
写道
/**
* charts的生成
* @return
*/
@RequestMapping("charts")
public String charts(Model model){
String x="\"field0\":\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\",\"10\",\"11\",\"12\"";
String ys="\"field1\":\"88\",\"59\",\"57\",\"58\",\"56\",\"54\",\"79\",\"51\",\"76\",\"87\",\"56\",\"74\";"
+ "\"field2\":\"23\",\"45\",\"25\",\"12\",\"67\",\"90\",\"56\",\"34\",\"56\",\"12\",\"23\",\"44\";"
+ "\"field3\":\"65\",\"23\",\"12\",\"11\",\"10\",\"3\",\"1\",\"34\",\"21\",\"22\",\"67\",\"99\";";
model.addAttribute("x", x);
model.addAttribute("ys", ys);
return "/empfile/emp2";
}
* charts的生成
* @return
*/
@RequestMapping("charts")
public String charts(Model model){
String x="\"field0\":\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\",\"10\",\"11\",\"12\"";
String ys="\"field1\":\"88\",\"59\",\"57\",\"58\",\"56\",\"54\",\"79\",\"51\",\"76\",\"87\",\"56\",\"74\";"
+ "\"field2\":\"23\",\"45\",\"25\",\"12\",\"67\",\"90\",\"56\",\"34\",\"56\",\"12\",\"23\",\"44\";"
+ "\"field3\":\"65\",\"23\",\"12\",\"11\",\"10\",\"3\",\"1\",\"34\",\"21\",\"22\",\"67\",\"99\";";
model.addAttribute("x", x);
model.addAttribute("ys", ys);
return "/empfile/emp2";
}
通过把x轴的数据和Y轴的数据,放到页面上。
前台页面:
引入jQuery和highcharts.js这个引入就可以了。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../../static/lib/jquery/jquery-1.11.2.min.js"></script> <title>Insert title here</title> <script type="text/javascript"> $(document).ready(function(){ alert("jquery正常工作"); }); $(function () { var x='<%=request.getAttribute("x")%>';//接收从后台传的x数据 x=x.split(":")[1];//取出x数组 x=x.replace(/\"/g,"");//去掉双引号 x=x.split(",");//拆分出数组 var ys='<%=request.getAttribute("ys")%>';//接收从后台传的y数据 ys=ys.split(";");//取出有多少个y轴数据 //曲线展示区域代码 $('#container').highcharts({ chart: { type: 'line' }, title: { text: 'Monthly Average Temperature', x: -20 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xAxis: { categories:x }, yAxis: { title: { text: 'Temperature (°C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: '°C' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 } }); for(var m=0;m<ys.length;m++){ var y=ys[m].replace(/\"/g,"");//先取出所有的双引号 var name=y.split(":")[0];//取出y轴的名字,也就是filed字段的名字 y=y.split(":")[1];//取出y轴数组 y=y.split(","); var array=new Array();//保证y轴的数组必须是数字数组 for(var i=0;i<y.length;i++){ array.push(parseInt(y[i])); } //填充Series序列数组 $('#container').highcharts().addSeries({// name:name, data:array }); } // $('#container').highcharts().addSeries({ // name:'fffffff', // data:[3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] // }); // $('#container').highcharts().addSeries({ // name:'ggggggggg', // data:[3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 50] // }); alert( $('#container').highcharts().series[0].name); alert( $('#container').highcharts().series[0].data); }); </script> </head> <body> <div>${x}</div><br> <div>${ys}</div> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body> <script src="../../static/highcharts.js"></script> </html>
核心方法就是addSeries,其他的很简单。主要注意的是Y轴传的数组一定要是数字数组。X轴只要是数组就可以了。
相关推荐
jQuery及highcharts做cpu动态走势图,https://blog.csdn.net/qq_40374604/article/details/83578837,有问题请留言
Highcharts 支持使用 AJAX 技术加载外部数据,并将其动态地更新到图表中。这一特性使得图表能够实时反映最新的数据变化,非常适合用于实时监控系统或动态数据分析平台。 ##### 2.14 倒置图表或扭转轴 Highcharts ...
它包含多个高级导航组件:预设置数据时间范围,日期选择器、滚动条、平移、缩放功能。 主要优势(功能特点) browsers兼容性 Highstock 可以在所有的移动设备及电脑上的浏览器中使用,包括 iPhone,iPad 和 IE6 ...
例如area(区域图)、arearange(区域排列图)、areaspline(区域曲线图)、areasplinerange、bar(条形图)、column(柱状图)、columnrange(柱状排列图)、gauge(测量图)、pie(饼图)等,并且可以定义数据点的...
如果有多条数据,你可以以类似`{"rows1":[...],"rows2":[...]}`的格式返回。 最后,在HTML页面中,你需要创建一个具有特定ID的`<div>`元素,如`<div id="container">`,Highcharts将在此元素内渲染图表。确保该元素...
总结,ASP.NET曲线图的实现涉及多个方面,包括选择合适的库、数据绑定、交互设计、样式定制以及性能优化。开发者可以根据项目需求和自身技术背景选择合适的方法,创建出既美观又实用的曲线图组件。
Highstock 支持直线图、折线图、面积图、面积曲线图、柱形图、散点图、蜡烛图(OHLC)、K线图、标签图、面积范围图、柱形范围图等多种图表, 其中很多图表可以集成在同一个图形中形成混合图 config-syntax简单的...
在JavaScript中,有多个库可以帮助我们轻松创建曲线图,如D3.js、Chart.js、ECharts、Highcharts等。D3.js(Data-Driven Documents)是一个强大的数据可视化库,允许开发者直接操作DOM来绑定任意数据,并且提供了...
- `plotLines`: 可以在Y轴上绘制一条或多条辅助线,如`[{value:0,width:1,color:'#808080'}]`表示在0度位置画一条灰色的线。 - **series**: 定义一系列的数据集,每个数据集对应图表中的一个系列。 - `name`: 数据...
- 拟合曲线:通过数学方法(如最小二乘法)将数据点拟合成一条平滑的曲线,常用于科学研究和数据分析。 - 面积图:在折线图的基础上填充下部区域,突出显示数据的累积效果。 - 茎叶图:一种特殊形式的曲线图,...
这些库允许添加多条折线,设置轴刻度、网格、图例和数据点标记,以及动画效果,使数据动态展现。 为了实现这些图表,我们需要了解HTML、CSS和JavaScript基础,同时掌握相关库的API。例如,ECharts提供了一系列的...
总之,C#在C/S和B/S环境下绘制曲线图表涉及到多方面的技术和策略,包括数据绑定、事件处理、AJAX请求、JSON数据交换、跨浏览器兼容性、性能优化以及交互设计等。理解并熟练运用这些知识点,可以创建出功能强大且用户...
此外,还可以利用Highcharts的模块化设计,按需加载特定的图表类型,以减少不必要的资源消耗。 总的来说,"图表模板(折现,图饼等)"这个主题涵盖了数据可视化的核心概念,通过Highcharts这一强大的工具,我们可以...
在开发过程中,需要注意性能优化,比如数据量大时的分页加载,以及响应式设计以适应不同设备。同时,良好的文档阅读习惯和动手实践是掌握这些知识点的关键,不断学习和探索新的库和API,可以提升开发效率并增强图表...
1. 加载数据:加载包含类别和相应值的数据。 2. 创建SVG:设置SVG元素的大小。 3. 计算总值:将所有数据项的值相加,得到总和。 4. 创建弧度尺度:使用d3.arc定义饼图的弧度,以计算每个扇区的角度。 5. 定义饼图...
在这个案例中,我们需要实现一个功能,即在曲线图上添加多条可拖动的游标线,当用户移动这些游标时,能够在表格或其他元素中实时显示对应的Y值。 首先,确保你已经引入了ECharts库。在HTML文件中,通过以下代码将...
柱状图是另一种常见的数据可视化工具,尤其适合对比多个分类数据的大小。在HTML5中,开发者可以通过JavaScript库,如Chart.js或D3.js,结合Canvas或SVG元素来创建柱状图。"vbar"可能就是这个资源中的柱状图实现,它...
在JS中,通过引入Chart.js、NVD3或amCharts等库,可以轻松绘制动态或静态的折线图,同时支持多条折线对比,提供平滑曲线、数据点标记等功能。 3. **圆形立体柱状图**:这种图表结合了柱状图和饼图的特点,能更直观...