HighCharts实现多数据折线图分列显示

HighCharts实现多数据折线图分列显示

BY ZYZ

HighCharts是一个很好用的web端绘图插件，用起来很方便，它的官方支持很好。并且有中文API（不全然）。画出来的图像也挺美丽的。

近期须要用HighCHarts绘制多数据展示对照的折线图。要求的效果类似下图。

这个图的特点是Y轴从大到小显示。多个X轴相应多个不同的折线，且每一个X轴的刻度不同。每条折线的颜色也不同，且折线不交叉。

在官方的在线演示里找了许久，并没有发现能够实现这样效果的样例，尽管有多轴多折线显示的样例，可是折线会交叉，不满足要求。预计是这种效果非常少会被用到。所以演示里面没有。遂去查找API，API里也没有发现类似的设置（可能是个人疏忽没有找到，假设有朋友知道怎样实现的话望留言告知。谢谢）。

我最后採用了拼接的方式实现这个效果，大概原理就是对每一条折线单独作图，最后将全部画板左右结合实现上图的效果。

详细使用方法例如以下：

1.为绘图准备好数据。依据API中对数据的要求（http://www.hcharts.cn/api/index.php#series.data）将数据做例如以下处理。

        //获取并处理数据成HighChart可用的结构
        function ShowFluidProporties(wellID) {
            var arrayALL = [];//装载全部折线
            $.post('Ajax/GetFluidProportiesHandler.ashx', { WellID: wellID },
            function (data) {
                var json = eval('(' + data + ')');
                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是在server获取的，适用于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>。

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

最后能够得到例如以下的结果图。基本满足要求。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTWV0YWwx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

參考：

HighCharts在线演示

http://www.hcharts.cn/demo/index.php

HighCharts半中文API文档

http://www.hcharts.cn/api/index.php