亚州视频在线,日韩大片中文,91欧美亚洲

Highcharts多數據折線圖分列顯示教程

轉帖|使用教程|編輯：龔雪|2014-07-24 09:31:05.000|閱讀 1750 次

概述：Highcharts是一個出色的JavaScript圖表制作工具，Highcharts也是一個非常好用的web端畫圖插件，最近使用Highcharts繪制多數據展示對比的折線圖，貼上教程供大家參考。

Highcharts是一個非常好用的web端畫圖插件，用起來非常方便，它的官方支持非常好，而且有中文API（不完全），畫出來的圖像也挺漂亮的。最近需要用Highcharts繪制多數據展示對比的折線圖，要求的效果類似下圖。

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);  
            }  
        }

最后可以得到如下的結果圖，基本滿足要求。

Highcharts實現多數據折線圖分列顯示

>>下載Highcharts

文章來源：

作者：ZYZ

標簽：JavaScript HTML5 圖表 highcharts

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

文章轉載自：csdn

上一篇：Print2Flash使用教程：文檔在線預覽下一篇：Xamarin使用教程三：DatePickerDialog的使用技巧