Highcharts使用例子

1、引用文件

<script type="text/javascript" th:src="@{../../highcharts/highcharts.js}"></script>
<script type="text/javascript" th:src="@{../../highcharts/exporting.js}"></script>
<script type="text/javascript" th:src="@{../../highcharts/highcharts-zh_CN.js}"></script>

2、前台div

<div id="first-chart"  style="height: 600px;"></div>
<div id="second-chart"  style="height: 600px;"></div>

3、声明

var options = {
	credits:{
	     enabled:false // 禁用版权信息
	},
	chart: {
	    renderTo: '',
	    zoomType: 'xy',
	    width: '',
	    height: ''
	},
	title: {
	    text: '',
	    x: -20 //center
	},
	subtitle: {
	    text: '',
	    x: -20
	},
	xAxis: {
	    categories: [],//X轴数据
	    crosshair: true
	},
	yAxis: [{ // Primary yAxis
	    labels: {
	        format: '{value}',
	        style: {
	            color: Highcharts.getOptions().colors[1]
	        }
	    },
	    title: {
	        text: '数量(单位:个)',
	        style: {
	            color: Highcharts.getOptions().colors[1]
	        }
	    }
	}, { // Secondary yAxis
	    title: {
	        text: '金额(单位:元)',
	        style: {
	            color: Highcharts.getOptions().colors[0]
	        }
	    },
	    labels: {
	        format: '{value}',
	        style: {
	            color: Highcharts.getOptions().colors[0]
	        }
	    },
	    opposite: true
	}],
	tooltip: {
		shared: true
	},
	legend: {
		layout: 'vertical',
	    align: 'left',
	    x: 100,
	    verticalAlign: 'top',
	    y: 100,
	    floating: true,
	},
	series: []//Y轴数据
}

3、初始化

initStatisticsData();//统计数据初始化
//加载统计数据
function initStatisticsData(){
	timeStr = $('#timeSpan').val();
	$.ajax({
		type : "post",
		url : "/statistics/getStatisticsDate",
		dataType : "json",
		data : {
			"timeStr" : timeStr,
			"sign" : sign
		},
		success : function(data) {
			formatData(data);
			initChart();
		},
		error : function() {
		}
	});
}

//格式化统计数据
function formatData(data){
	xOrderData = data[0].timeCodeList;
	yOrderData = [{
        name: '申请人数',
        yAxis: 0,
        data: data[0].map.peopleNum,
        tooltip: {
            valueSuffix: '个'
        }
    },{
        name: '申请单数',
        yAxis: 0,
        data: data[0].map.applicationNum,
        tooltip: {
            valueSuffix: ' 个'
        }
    }, {
        name: '审核单数',
        yAxis: 0,
        data: data[0].map.auditNum,
        tooltip: {
            valueSuffix: '个'
        }
    },{
        name: '申请金额',
        yAxis: 1,
        data: data[0].map.applicationAmount,
        tooltip: {
            valueSuffix: ' 元'
        }
    }, {
        name: '放款金额',
        yAxis: 1,
        data: data[0].map.loanAmount,
        tooltip: {
            valueSuffix: '元'
        }
    }];
	xUserData = data[1].timeCodeList;
	yUserData = [{
        name: '注册人数',
        yAxis: 0,
        data: data[1].map.userNum,
        tooltip: {
            valueSuffix: ' 个'
        }
    }];
}

//初始化表格
function initChart() {
	options.chart.type = chartType;
	options.chart.height = chartHeight;
	options.chart.width = chartWidth;
	if("line"==chartType) {
		options.legend.layout = "vertical";
		options.legend.align = "left";
		options.legend.x = 100;
		options.legend.verticalAlign = "top";
		options.legend.y = 100;
		options.legend.floating = true;
	} else {
		options.legend.layout = "horizontal";
		options.legend.align = "center";
		options.legend.x = 0;
		options.legend.verticalAlign = "bottom";
		options.legend.y = 0;
		options.legend.floating = false;
	}
	options.chart.renderTo = "first-chart";
	options.xAxis.categories = xOrderData;
	options.series = yOrderData;
	firstChart = new Highcharts.Chart(options);
	options.chart.renderTo = "secondChart";
	options.xAxis.categories = xUserData;
	options.series = yUserData;
	secondChart = new Highcharts.Chart(options);
}