Highcharts多数据折线图分列显示教程-控件新闻-慧都网

Highcharts多数据折线图分列显示教程

转帖|使用教程|编辑：龚雪|2014-07-24 09:31:05.000|阅读 1721 次

概述：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@pclwef.cn

文章转载自：csdn

上一篇：Print2Flash使用教程：文档在线预览下一篇：Xamarin使用教程三：DatePickerDialog的使用技巧