轉帖|使用教程|編輯:龔雪|2014-07-24 09:31:05.000|閱讀 1763 次
概述:Highcharts是一個出色的JavaScript圖表制作工具,Highcharts也是一個非常好用的web端畫圖插件,最近使用Highcharts繪制多數據展示對比的折線圖,貼上教程供大家參考。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
Highcharts是一個非常好用的web端畫圖插件,用起來非常方便,它的官方支持非常好,而且有中文API(不完全),畫出來的圖像也挺漂亮的。最近需要用Highcharts繪制多數據展示對比的折線圖,要求的效果類似下圖。

這個圖的特點是Y軸從大到小顯示,多個X軸對應多個不同的折線,且每個X軸的刻度不同,每條折線的顏色也不同,且折線不交叉。
在官方的在線演示里找了許久,并沒有發現可以實現這樣效果的例子,雖然有多軸多折線顯示的例子,但是折線會交叉,不滿足要求。估計是這樣的效果很少會被用到,所以演示里面沒有。遂去查找API,API里也沒有發現類似的設置(可能是個人疏忽沒有找到,如果有朋友知道如何實現的話望留言告知,謝謝)。
我最后采用了拼接的方式實現這個效果,大概原理就是對每一條折線單獨作圖,最后將所有畫板左右結合實現上圖的效果。
具體用法如下:
1.為畫圖準備好數據,根據API中對數據的要求()將數據做如下處理。
//獲取并處理數據成HighChart可用的結構
function ShowFluidProporties(wellID) {
var arrayALL = [];//裝載所有折線
$.post('Ajax/GetFluidProportiesHandler.ashx', { WellID: wellID },
function (data) {
var json = ;
var rows = json.rows;
var tempPoint = [];//臨時裝載每個點中的X,Y值
var tempLine = [];//臨時裝載每條折線中的所有點
for (var j = 0; j < arrayTitle.length; j++) {
for (var i = 0; i < json.total; i++) {
//制造點數據
tempPoint.push(Number(rows[i][arrayTitle[j]]), Number(rows[i].SamplingWellDepth));
//為折線添加點
tempLine.push(tempPoint);
//清空臨時點
tempPoint = [];
}
//將折線添加到折線集合里
arrayALL.push(tempLine);
//清空臨時折線
tempLine = [];
}
//利用折線集合作圖
if (arrayALL) ShowLines(arrayALL);
});
}
函數中的data是在服務器獲取的,適用于EasyUI中datagrid的json字符串。
其中的arrayTitle在函數前定義。
//需要顯示的數據列的列名集
var arrayTitle = ['Density', 'ECD', 'Viscosity', 'R600', 'R300', 'R200', 'R100', 'R6', 'R3'];
2.由于每條折線大體上是差不多的,所以為折線圖設置一個通用屬性,我只做了簡單注釋,具體用法詳見API。
//折線圖的畫圖屬性
var options = {
chart: {
renderTo: '',//折線位置
type: 'line',//表明是折線圖
spacingTop: 25, //圖框離上方控件的距離
spacingBottom: 10,//圖框離下方控件的距離
marginLeft: 0, //折線圖的左邊距
marginRight: 0//折線圖的右邊距
},
title: { text: '' }, //折線圖的標題
credits: { enabled: false }, //是否顯示版權信息
plotOptions: {
line: {
marker: {
enabled: false//是否顯示點標記
}
}
},
xAxis: {
lineColor: '', //邊框線顏色
tickColor: '', //刻度線顏色
maxPadding: 0.2,//折線最大處距離刻度線的距離相對于刻度線長度的比值
minPadding: 0.2,//折線最小處距離刻度線的距離相對于刻度線長度的比值
gridLineWidth: 1,//網格線寬度
minorTickInterval: 'auto', //小刻度的間隔
minorTickLength: 5, //小刻度的長度
minorTickWidth: 1, //小刻度的寬度
minorTickColor: '', //小刻度的顏色
endOnTick: true, //是否以刻度結束
title: {//指定X軸的標題
text: '',
style: {
fontWeight: "bold",
fontSize: '10pt'
}
}
},
yAxis: {
lineColor: '#000',
lineWidth: 1,
tickColor: '#000',
tickLength: 5,
tickWidth: 1,
min: 0,//設置最小刻度的值
maxPadding: 0.01,
minPadding: 0.1,
gridLineWidth: 1,
reversed: true,//是否翻轉顯示,從大到小
minorTickInterval: 'auto',
title: {//指定y軸的標題
text: '井深',
style: {
fontWeight: "bold",
fontSize: '10pt'
}
}
},
series: [{//折線屬性
name: '', //折線名稱
color: '',//折線顏色
data: []//折線的點數據
}]
}
3.下面就該作圖了。
由于每條折線都是單獨獨立的作圖,所以需要對每條折線設置一個單獨的顏色,否者全部都是一個顏色就沒有對比的效果了。
//色彩集 var setColors = ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a']; //var setColors = ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']; //var setColors = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'];
我采用的是多個折線圖獨立畫圖的方法,需要為每個圖分配一個畫圖的DIV空間。這里也可以在作圖函數里動態生成。
<div style="width: auto; height: 750px; margin: 10px; border: 2px #416AA3 solid;
margin: 10px;">
<div style="width: 190px; height: 700px; float: left;" id="FluidProporty0">
</div>
……
<div style="width: 115px; height: 700px; float: left;" id="FluidProporty8">
</div>
</div>
為了達到效果,我需要所有折線左右無縫連接,且只在最左邊的折線圖中顯示Y軸,將折線圖的marginLeft屬性需要設置為0,便可以將Y軸隱藏,并且和前一個折線圖無縫連接。在這里我使用了循環生成折線圖的方法。如下
//展示折線,需要參考HighChart的API
function ShowLines(arrayALL) {
for (var i = 0; i < arrayTitle.length; i++) {
var tempOptions = options;
if (i == 0) {//左側第一個折線圖
delete tempOptions.chart.marginLeft;//該語句刪除屬性
}
else {
tempOptions.chart.marginLeft = 0;
tempOptions.yAxis.title.text = '';
}
tempOptions.chart.renderTo = 'FluidProporty' + i;
tempOptions.title.text = arrayTitle[i];
tempOptions.series[0] = {
name: arrayTitle[i],
color: setColors[i],
data: arrayALL[i]
};
tempOptions.xAxis.lineColor = setColors[i];
tempOptions.xAxis.tickColor = setColors[i];
tempOptions.xAxis.minorTickColor = setColors[i];
//根據折線屬性繪制折線
var chart = new Highcharts.Chart(tempOptions);
}
}
最后可以得到如下的結果圖,基本滿足要求。

文章來源:
作者:ZYZ
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:csdn