第一步
新建頁面line.html，引入HighCharts核心js文件
<script type="text/javascript" src="../../js/Highcharts/highcharts.js"></script>
第二步
插入折線圖容器 <div id="container"></div>
第三步
編寫腳本從服務器端請求數據
makeColumnChart("DBT_GLWMD","#container1");
function makeColumnChart(chartName,container) {
$(container).show();
$(container).empty();
var request;
index = layer.load(1, {
shade : [ 0.1, '#fff' ] //0.1透明度的白色背景
});
request = $
.ajax({
url : "../../subjectInfo",
type : "POST",
contentType : "application/x-www-form-urlencoded; charset=UTF-8",
data : {
operType : "chart_Column",
startYear : $.trim($("#startYear").val()),
//endYear : $.trim($("#endYear").val()),
cName : chartName
},
dataType : "html"
});
if(chartName=="DBT_GLWMD"){
titleText = $("#startYear").val() + '年公路網密度對比圖';
}
if(chartName=="DBT_PTGX"){
titleText = $("#startYear").val() + '年普通干線二級及以上比例對比圖';
}
if(chartName=="DBT_NCGL"){
titleText = $("#startYear").val() + '年農村公路等級及以上比例對比圖';
}
request.done(function(msg) {
layer.close(index);
if (msg != "") {
var jdata = strToJson(msg);
if(chartName=="DBT_GLWMD"){
creatColumn(jdata, titleText, container);
}
if(chartName=="DBT_PTGX"){
creatColumnWithPer(jdata, titleText, container);
}
if(chartName=="DBT_NCGL"){
creatColumnWithPer(jdata, titleText, container);
}
}
});
}
function strToJson(str) {//字符串轉換為json
var json = eval('(' + str + ')');
return json;
}
第四步
服務器端獲取數據
result="[{name: '全省',y:"+sProvince+" }, {name: '貧困地區',y:"+sPK+" }, {name: '"+sCountyName+"',y:"+sCounty+"}]";
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.write(result);
第五步 編寫腳本生成柱狀圖
function creatColumn(data,titleStr,container) {
$(container)
.highcharts(
{
lang : {
printChart : "打印圖表",
downloadJPEG : "下載JPEG 圖片",
downloadPDF : "下載PDF文檔",
downloadPNG : "下載PNG 圖片",
downloadSVG : "下載SVG 矢量圖",
exportButtonTitle : "導出圖片"
},
chart: {
type: 'column'
},
title: {
text: titleStr
},
credits : {
enabled : false
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.0f}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.0f}</b> of total<br/>'
},
series: [{
name: '對比圖',
colorByPoint: true,
data: eval(data)
}]
});
}
function creatColumnWithPer(data,titleStr,container) {
$(container)
.highcharts(
{
lang : {
printChart : "打印圖表",
downloadJPEG : "下載JPEG 圖片",
downloadPDF : "下載PDF文檔",
downloadPNG : "下載PNG 圖片",
downloadSVG : "下載SVG 矢量圖",
exportButtonTitle : "導出圖片"
},
chart: {
type: 'column'
},
title: {
text: titleStr
},
credits : {
enabled : false
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: ''
},
labels: {//y軸刻度文字標簽
formatter: function () {
return this.value + '%';//y軸加上%
}
},
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
formatter : function() {
return this.y + "%"; //返回百分比和個數
}
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.0f}%</b> of total<br/>'
},
series: [{
name: '對比圖',
colorByPoint: true,
data: eval(data)
}]
});
}
