HignCharts：线形图饼图绘制及时间等定制

2,348 views

阅读模式

最近.net项目需要做数据图形统计功能，于是引入了HignCharts；选择它主要是因为其开源，且无第三方库依赖。

我们的产品中需要用到的有饼图和折线图：

首先引入js:

    <script src="../../code/highcharts.js"></script>
    <script src="../../code/modules/exporting.js"></script>
    <script src="../../code/modules/export-data.js"></script>

一、饼图

饼图.jpg

饼图的绘制比较简单：

        var pieChart = Highcharts.chart('container_pie', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            credits: {
                enabled: false
            },
            colors:[
                        '#1E90FF', '#FFC125', '#CD5555', '#8B8B00', '#B4CDCD', '#9B30FF', '#7CFC00'
            ],
            title: {
                text: '各数据分类占比'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        distance: -30,
                        format: '{point.percentage:.1f}%',
                    },
                    showInLegend: true
                }
            },
            series: [{
                name: '占比',
                colorByPoint: true,
                data: [<% =PieData %>]
            }]
        });

这里定制的地方主要有几个，credits隐藏右下角标志，colors饼图各部分显示的颜色，tooltip的pointFormat用于定制悬浮窗口下半部分的文字，plotOptions的format用于将数据转换为百分比，series中数据部分，由于我是.NET开发，用的aspx和cs，数据传递使用<% =PieData %>

二、折线图

折线图.jpg

使用HignCharts后，折线图的绘制也很简单，但是，需要做一些个性化的修改

        var lineChart = Highcharts.chart('container_line', {
            chart: {
                type: 'line'
            },
            credits: {
                enabled: false
            },
            title: {
                text: '趋势图'
            },
            colors:[
                        '#1E90FF', '#00CD00', '#EE3B3B', '#8B8B00', '#B4CDCD', '#9B30FF', '#7CFC00'
            ],
            xAxis: {
                type: 'datetime',
                gridLineWidth:1,
                dateTimeLabelFormats: {
                    day: '%Y-%m-%d'
                },
                tickPositions: [<% =LineXTickPositions %>],
                labels: {
                    formatter: function(){
                        return Highcharts.dateFormat('%Y-%m-%d', this.value);  //格式化x轴时间格式
                    }
                },
            },
            yAxis: {
                title: {
                    text: ''
                },
                gridLineWidth:1,
                gridLineDashStyle:'Dash'
            },
            tooltip : {
                formatter: function () { 
                    return Highcharts.dateFormat('%Y-%m-%d',this.x)+'<br/><b>'+ this.series.name +'：' + this.y+'<b/>';  
                }  
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        // 开启数据标签
                        enabled: false
                    },
                    // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    enableMouseTracking: true
                },
                series: {
                    pointStart: <% =LineStartTime %>,
                    pointInterval: 24 * 3600 * 1000
                }
            },
            series: [<% =LineData %>]
        });

饼图重复的部分就不说了，除此之外，还有一些需要定制的：

首先，x轴是时间：于是我们设置xAxis: { type: 'datetime' 然后我们需要设置间隔是变化的，可能1天，可能3天。但是无论设置tickInterval或者step都无法达到预想的效果。于是只有自己在后台cs代码中计算并传递tickPositions: [<% =LineXTickPositions %>],（这里我们的需要是X轴最多10个）
然后需要设置x轴坐标的格式：

labels: {
    formatter: function(){
        return Highcharts.dateFormat('%Y-%m-%d', this.value);  //格式化x轴时间格式
    }
},

plotOptions的series中设置pointStart开始时间，pointInterval: 24 * 3600 * 1000表示每个数据间隔一天
点击图上的点，弹出弹窗也定制：

tooltip : {
    formatter: function () { 
        return Highcharts.dateFormat('%Y-%m-%d',this.x)+'<br/><b>'+ this.series.name +'：' + this.y+'<b/>';  
    }  
},

上面有将时间格式化，Highcharts默认是utc时间，然后你们传入的不是utc时间，可能导致少了8个小时，则需要在Highcharts.chart('container_line', {设置前加上Highcharts.setOptions({ global: { useUTC: false } });

原文：简书ThinkinLiu 博客: IT老五