Highcharts js图表使用

showlike

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


线性图表基础实例参数说明
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]}]});});


实例应用
一、引入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 创建
如上参数说明