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

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

HignCharts官网演示地址API

HignCharts图形.jpg

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

首先引入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 %>]
        });

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

  1. 首先,x轴是时间:于是我们设置xAxis: { type: ‘datetime’ 然后我们需要设置间隔是变化的,可能1天,可能3天。但是无论设置tickInterval或者step都无法达到预想的效果。于是只有自己在后台cs代码中计算并传递tickPositions: [<% =LineXTickPositions %>],(这里我们的需要是X轴最多10个)
  2. 然后需要设置x轴坐标的格式:
labels: {
    formatter: function(){
        return Highcharts.dateFormat('%Y-%m-%d', this.value);  //格式化x轴时间格式
    }
},
  1. plotOptions的series中设置pointStart开始时间,pointInterval: 24 * 3600 * 1000表示每个数据间隔一天
  2. 点击图上的点,弹出弹窗也定制:
tooltip : {
    formatter: function () { 
        return Highcharts.dateFormat('%Y-%m-%d',this.x)+'<br/><b>'+ this.series.name +':' + this.y+'<b/>';  
    }  
},
  1. 上面有将时间格式化,Highcharts默认是utc时间,然后你们传入的不是utc时间,可能导致少了8个小时,则需要在Highcharts.chart(‘container_line’, {设置前加上Highcharts.setOptions({ global: { useUTC: false } });

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

使用HighCharts确实很方便,除饼图和折线图以外,还有很多其他的图形样式可供选择,API也很全;不过,他是商业收费的,这点需要注意。



发表评论

必填项已用*标注

+ 11 = 18