`
747017186
  • 浏览: 329869 次
社区版块
存档分类
最新评论

highcharts加载多条曲线数据

    博客分类:
  • js
 
阅读更多

以前做过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";
}

 通过把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轴只要是数组就可以了。

 

 

分享到:
评论

相关推荐

    cpu动态走势图jQuery及highcharts

    jQuery及highcharts做cpu动态走势图,https://blog.csdn.net/qq_40374604/article/details/83578837,有问题请留言

    Highcharts图表使用说明

    Highcharts 支持使用 AJAX 技术加载外部数据,并将其动态地更新到图表中。这一特性使得图表能够实时反映最新的数据变化,非常适合用于实时监控系统或动态数据分析平台。 ##### 2.14 倒置图表或扭转轴 Highcharts ...

    Highcharts-Stock-8.1.2.zip

    它包含多个高级导航组件:预设置数据时间范围,日期选择器、滚动条、平移、缩放功能。 主要优势(功能特点) browsers兼容性 Highstock 可以在所有的移动设备及电脑上的浏览器中使用,包括 iPhone,iPad 和 IE6 ...

    HighCharts中文API

    例如area(区域图)、arearange(区域排列图)、areaspline(区域曲线图)、areasplinerange、bar(条形图)、column(柱状图)、columnrange(柱状排列图)、gauge(测量图)、pie(饼图)等,并且可以定义数据点的...

    Highcharts使用简例及异步动态读取数据

    如果有多条数据,你可以以类似`{"rows1":[...],"rows2":[...]}`的格式返回。 最后,在HTML页面中,你需要创建一个具有特定ID的`&lt;div&gt;`元素,如`&lt;div id="container"&gt;`,Highcharts将在此元素内渲染图表。确保该元素...

    asp.net曲线图

    总结,ASP.NET曲线图的实现涉及多个方面,包括选择合适的库、数据绑定、交互设计、样式定制以及性能优化。开发者可以根据项目需求和自身技术背景选择合适的方法,创建出既美观又实用的曲线图组件。

    Highcharts-Gantt-8.1.2.zip

    Highstock 支持直线图、折线图、面积图、面积曲线图、柱形图、散点图、蜡烛图(OHLC)、K线图、标签图、面积范围图、柱形范围图等多种图表, 其中很多图表可以集成在同一个图形中形成混合图 config-syntax简单的...

    各种JS曲线图效果

    在JavaScript中,有多个库可以帮助我们轻松创建曲线图,如D3.js、Chart.js、ECharts、Highcharts等。D3.js(Data-Driven Documents)是一个强大的数据可视化库,允许开发者直接操作DOM来绑定任意数据,并且提供了...

    highcharts实例配置手册-2014最新版

    - `plotLines`: 可以在Y轴上绘制一条或多条辅助线,如`[{value:0,width:1,color:'#808080'}]`表示在0度位置画一条灰色的线。 - **series**: 定义一系列的数据集,每个数据集对应图表中的一个系列。 - `name`: 数据...

    8个曲线图表源码

    - 拟合曲线:通过数学方法(如最小二乘法)将数据点拟合成一条平滑的曲线,常用于科学研究和数据分析。 - 面积图:在折线图的基础上填充下部区域,突出显示数据的累积效果。 - 茎叶图:一种特殊形式的曲线图,...

    网页版专题图、饼图、曲线图

    这些库允许添加多条折线,设置轴刻度、网格、图例和数据点标记,以及动画效果,使数据动态展现。 为了实现这些图表,我们需要了解HTML、CSS和JavaScript基础,同时掌握相关库的API。例如,ECharts提供了一系列的...

    c#在C/S和B/S下绘制各种曲线图表

    总之,C#在C/S和B/S环境下绘制曲线图表涉及到多方面的技术和策略,包括数据绑定、事件处理、AJAX请求、JSON数据交换、跨浏览器兼容性、性能优化以及交互设计等。理解并熟练运用这些知识点,可以创建出功能强大且用户...

    图表模板(折现,图饼等)

    此外,还可以利用Highcharts的模块化设计,按需加载特定的图表类型,以减少不必要的资源消耗。 总的来说,"图表模板(折现,图饼等)"这个主题涵盖了数据可视化的核心概念,通过Highcharts这一强大的工具,我们可以...

    js饼状图+柱状图+曲线图

    在开发过程中,需要注意性能优化,比如数据量大时的分页加载,以及响应式设计以适应不同设备。同时,良好的文档阅读习惯和动手实践是掌握这些知识点的关键,不断学习和探索新的库和API,可以提升开发效率并增强图表...

    JS实现柱形图和饼形图

    1. 加载数据:加载包含类别和相应值的数据。 2. 创建SVG:设置SVG元素的大小。 3. 计算总值:将所有数据项的值相加,得到总和。 4. 创建弧度尺度:使用d3.arc定义饼图的弧度,以计算每个扇区的角度。 5. 定义饼图...

    echarts图形上绘制可以拖动的游标线

    在这个案例中,我们需要实现一个功能,即在曲线图上添加多条可拖动的游标线,当用户移动这些游标时,能够在表格或其他元素中实时显示对应的Y值。 首先,确保你已经引入了ECharts库。在HTML文件中,通过以下代码将...

    html5饼图、柱状图、折线图,Html5+JS开发

    柱状图是另一种常见的数据可视化工具,尤其适合对比多个分类数据的大小。在HTML5中,开发者可以通过JavaScript库,如Chart.js或D3.js,结合Canvas或SVG元素来创建柱状图。"vbar"可能就是这个资源中的柱状图实现,它...

    JS图形报表

    在JS中,通过引入Chart.js、NVD3或amCharts等库,可以轻松绘制动态或静态的折线图,同时支持多条折线对比,提供平滑曲线、数据点标记等功能。 3. **圆形立体柱状图**:这种图表结合了柱状图和饼图的特点,能更直观...

Global site tag (gtag.js) - Google Analytics