前言

最近公司让做一个数据看板，主要统计公司主站的订单、用户注册量以及用户访问量等数据。

前面部分的订单都可以直接写个查询接口显示数据，后面的订单类型、用户注册量、用户访问量则涉及到可视化图表的使用。作为 web 图表库，highcharts 是我了解的前端库里的不二之选。

Highcharts 文档教程 Highcharts API 详解

这里面三个图表分别用了三种不同类型的图表来展示，分别是饼状图（pie）、柱状图（column）、直线图（line）。花了一天的时间去熟悉 highcharts 图表使用，以下针对使用过程中的细节点的总结。

highcharts 初始化方法

一种是官方网站使用的 Highcharts.chart('id', options)：

        // 图表配置
        var options = {
            chart: {
                type: 'bar'                          //指定图表的类型，默认是折线图（line）
            },
            title: {
                text: '我的第一个图表'                 // 标题
            },
            xAxis: {
                categories: ['苹果', '香蕉', '橙子']   // x 轴分类
            },
            yAxis: {
                title: {
                    text: '吃水果个数'                // y 轴标题
                }
            },
            series: [{                              // 数据列
                name: '小明',                        // 数据列名
                data: [1, 0, 4]                     // 数据
            }, {
                name: '小红',
                data: [5, 7, 3]
            }]
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);

另外一种是在寻找解决方案的时候发现的 $('#container').highcharts(options)。

两种都可以使用，前者是通过 Highcharts 类方法 chart() 创建对象，后者是用 jQuery 对象的实例方法 highcharts() 创建对象。显而易见，后者使用时必须要加载 jQuery。

图表类型标识

有三个属性都可以标识当前图标类型：chart.type，plotOptions.xxx，series[0].type。chart.type 是最直接的图表属性标识，plotOptions 下每个对象都标识不同的图表数据列配置，series[0].type 是数据列中进行声明。三个地方都没有明确标识的，会默认初始化为 line （直线）类型。

隐藏图表右下角 highcharts 版权信息

版权信息默认是展示的，可以通过 credits 配置隐藏：

...
credits: {
    enabled:false,
},
...

标题、刻度标签、数据标签样式设置

标题分为总标题（title）、x 轴标题（xAxis.title）、y 轴标题（yAxis.title），刻度标签有 x 轴刻度标签（xAxis.labels）、y 轴刻度标签（yAxis.labels），提示工具 tooltip，数据标签 plotOptions.xxx.dataLabels。这些文本类型的属性，都可以通过他们的 style 属性进行设置字体颜色、字体大小等等样式。下面是以总标题 title 为例：

...
title: {
    text: '总标题',
    style: {
        'color': '#fff',
        'fontSize': 18,
    },
},
...

图表颜色设置

这里指图表主体的颜色，比如柱状图柱子的颜色，饼状图中每一块扇形的颜色。highcharts 默认是有一整套颜色的，也就是说如果不设置颜色 colors 属性，也是默认会显示不同颜色的。此外 plotOptions 下有些类型的图表还可以针对数据点（point）进行设置颜色，比如 plotOptions.column.colors。要想数据列配置项下的图表颜色配置生效，需要将其下的 colorByPoint 设置为 true，即 plotOptions.column.colorByPoint: true。如果设置的颜色数组元素个数不够（比展示数据少），highcharts 会循环使用数组中的颜色。

在柱状图中，内外设置的颜色都使用在了柱状图上，而在直线图中，外部颜色应用在不同的 series 数据列上，内部颜色用在了数据点（point）上。

图表渐变颜色设置

这个是在网上找的教程，参考了两个：HighCharts 柱状图设置渐变色、highcharts 柱状图设置颜色渐变的效果。

第一个教程核心代码摘录：

var colors = ['#F59656', '#90BF18', '#EDCA4E'];

Highcharts.getOptions().colors = Highcharts.map(colors, function (color) {
    return {
        radialGradient: { cx:0, cy: -0.8,r:2.3 },
        stops: [[0, color], [1, Highcharts.Color(color).brighten(14).get('rgb')] // darken
        ]
    };
});

这种属于全局设置，需要在初始化图表之前调用，图表初始化后调用无效，回调函数内调用无效。radialGradient 的 cx 属性和 cy 属性分别控制左右和上下方向的渐变。因为是需要的是上下渐变，所以 cx 设置为 0，cy 负值表示从上到下渐变，正值表示从下到上渐变，stops 中的两个颜色，0 表示渐变起始颜色，1 表示渐变结束颜色。r 不清楚具体含义，但调节大小（非负）可以使渐变范围增大或者减小，猜测是渐变半径的意思（没有找到这种定义方式的出处）。brighten(14) 表示颜色变浅，负值表示颜色加深。这样一个颜色可以从深到浅，或者从浅到深，实现颜色渐变的效果。也可以取两种不同深浅的颜色，将 colors 设置成二维数组，取值后分别设置 stops 中 0、1 不同颜色。

通过测试发现，还可以将其放到 highcharts 图表初始化配置中：

var colors = ['#F59656', '#90BF18', '#EDCA4E'];
Highcharts.chart('container',{

...

colors: Highcharts.map(colors, function (color) {
    return {
        radialGradient: { cx: 0, cy: -0.8, r: 2.3 },
        stops: [[0, color], [2, Highcharts.Color(color).brighten(14).get('rgb')] // darken
        ]
    };
}),

...

或者（这里以柱状图为例）

var colors = ['#F59656', '#90BF18', '#EDCA4E'];
Highcharts.chart('container',{

...

plotOptions: {
    column: {
        colorByPoint: true,
        colors: Highcharts.map(colors, function (color) {
            return {
                radialGradient: { cx:0, cy: -0.8,r:2.3 },
                stops: [[0, color], [1, Highcharts.Color(color).brighten(14).get('rgb')] // darken
                ]
            };
        }),
    }
},
...

第二个教程核心代码摘录：

    var colorArr = [['#7C39B0', '#DF8EE6'], ['#2C1EAF', '#00BCEC']];
    var chart;
    Highcharts.chart('container', options, function (c) {
            SetEveryOnePointColor(c);
            chart = c;
        });
    }
    //设置每一个数据点的颜色值
    function SetEveryOnePointColor(chart) {
        //获得第一个序列的所有数据点
        var series = chart.series;
        for (var j = 0; j < series.length; j++) {
            var pointsList = series[j].points;
            //遍历设置每一个数据点颜色
            for (var i = 0; i < pointsList.length; i++) {
                series[j].points[i].update({
                    color: {
                        //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
                        linearGradient: {x1: 0, y1: 1, x2: 0, y2: 0}, 
                        stops: [
                            [0, Highcharts.Color(colorArr[j][0]).setOpacity(1).get('rgba')],
                            [1, Highcharts.Color(colorArr[j][1]).setOpacity(1).get('rgba')]
                        ]
                    }
                });
            }
        }
    }

这种是在图表初始化之后去更新图表点的数据（上面提到过，柱状图点的颜色与外部 colors 都作用于柱状图本身，所以也适用）。在图表的回调函数内，执行更新数据点颜色的操作。原文评论区有人说这个方法对性能消耗比较大，这个不确定，当前的目标是显示颜色渐变的效果。linearGradient 中 x1、x2 都为 0 表示横向上没有渐变，y1 > 0， y2 < 0 表示从下到上渐变，反之就是从上到下渐变。stops 中采用了前面提到的二维数组取点颜色设置，0 表示渐变起始颜色，1 表示渐变结束颜色。

两种方法都尝试过，都是可行的。

数据列与数据更新

这里以柱状图为例。

从官网的入门 demo 中可以看到，需要更新的数据有两个部分：xAxis.categories 和 series。xAxis.categories 就是一数组，里面存放的是 x 轴刻度上展示的数据，正常的如日期或者一些类型字符串，表示一个维度上的变化。y 轴上的刻度数据是根据数据列 series[xx].data[xx].y 数值范围自动生成。图表主体则是一系列的点位数据生成的，在某某一点位上 {point.name} 就是 series[xx].name，{point.y} 就是 series[xx].data[xx].y。

当 series 存在多项数据时，柱状图每一个点位上就会有多个矩形柱，对应在直线图中就是多条折线。

更新数据：

chart.xAxis[0].categories = data.date;
chart.series[0].update(data.series[0]);
chart.series[1].update(data.series[1]);
// 或者
var obj = data.series[0];
chart.series[0].update({name:obj.name,data:obj.data});

数据列中数据条数较少时可以直接这么赋值，多了可以遍历。