Highcharts js图表使用

最新推荐文章于 2025-03-27 14:29:18 发布

最新推荐文章于 2025-03-27 14:29:18 发布 · 132 阅读

文章标签：

#Highcharts #JavaScript #jqury #ViewUI

jquery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用Highcharts创建线性图表，包括图表配置参数说明及实例应用。涵盖图表容器、类型设置、标题、横纵坐标配置、数据点提示、数据项显示等内容，并提供数据准备与JSON格式转换的方法。

[b]资料[/b]
Highcharts官方网址： http://www.highcharts.com/
Highcharts官方文档网址：http://www.highcharts.com/demo/

[b]线性图表基础实例参数说明[/b]

var chart;
$(document).ready(function() {
	chart = new Highcharts.Chart({
		chart: {
			renderTo: 'container',	//图表在页面显示容器
			type: 'line',		//图表类型(line线性，此项为默认值)
			marginRight: 130,	//右宽度（类css margin-right）
			marginBottom: 25	//下宽度
		},
		title: {
			text: 'Monthly Average Temperature',	//正标题
			x: -20 //center	 默认标题居中，-20为相对居中往左20，往右则为正数			
		},
		subtitle: {
			text: 'Source: WorldClimate.com',	//副标题
			x: -20
		},
		xAxis: { 
			//横坐标显示数据
			categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
				'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
		},
		yAxis: {
                        //纵坐标标题
			title: {
				text: 'Temperature (°C)'
			},
			//标线属性
			plotLines: [{
				value: 0,
				width: 1,
				color: '#808080'
			}]
		},
		//数据点的提示框内容
		tooltip: {
			//数据格式，自定义
			formatter: function() {
					return '<b>'+ this.series.name +'</b><br/>'+
					this.x +': '+ this.y +'°C';
			}
		},
		//数据点参数选项
		plotOptions: {
			line: {
				dataLabels: {
					enabled: true	//数据点显示数据(默认为不显示)
				},
				enableMouseTracking: false	//当鼠标移到数据点上时，是否显示数据提示框(默认为显示)
			}
		},
		//数据项显示位置(此例为: 'Tokyo', 'New York',显示位置为右边)
		legend: {
			layout: 'vertical',
			align: 'right',
			verticalAlign: 'top',
			x: -10,
			y: 100,
			borderWidth: 0
		},
		//需显示的数据内容
		series: [{
			name: 'Tokyo',
			data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
		}, {
			name: 'New York',
			data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0]
		}]
	});
});

[b]实例应用[/b]
一、引入winCharts.js
二、显示数据准备
从上面实例配置可以看出，显示数据内容为典型的JSON 数据格式，这样可以通过json-lib.jar 进行数据转换。
1、最终数据格式

{
	name: 'Tokyo',
	data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
}

//数据准备


2、data：List dataList = new ArrayList();
 dataList .add(7.0);
 dataList .add(6.9);
 dataList .add(9.5);
 dataList .add(14.5);
 dataList .add(18.2);
 dataList .add(21.5);
3、Map map = new HashMap();
map.put(“name”,” Tokyo”);
map.put(“data”, dataList);

注：多数据重复如上步骤
//数据通过json-lib.jar中方法格式化成JSON类型数据

4、JSONObject json  = new JSONObject();
	Json.putAll(map);

三、 Highcharts 创建
如上参数说明