highcharts动态修改背景、标签格式总结

使用highcharts的最大感受是配置灵活，上手快，主题样式多，界面清新。支持的图表类型有曲线图、区域图、柱状图、饼状图、散点图、气泡图和综合图表，部分图表也有3d效果。本文主要针对动态修改图表样式属性的操作进行总结，一般配置可直接参考中文教程与api文档。

中文教程：https://www.hcharts.cn/docs

实例：https://www.hcharts.cn/demo/highcharts

API文档：https://api.hcharts.cn/highcharts

1.背景色设置

highcharts支持的背景样式：透明、颜色、渐变，设置方式都是通过图表backgroundColor属性。

透明背景设置：

chart.update({
    chart:{
        backgroundColor:null //背景为透明，使用rgba(0,0,0,0)或空字符也可以实现透明
    }
});

带颜色的背景设置：

chart.update({
    chart:{
          backgroundColor:'lightblue'//背景为颜色，支持颜色名、RGB格式和十六进制颜色值
    }
});

渐变色的背景设置：
渐变色分线性渐变和径向渐变，线性渐变使用linearGradient属性控制渐变方向，可用数值或百分比表示，四个值分别代表左、上、右、下四个方向，可进行组合设置对角方向渐变。stops定义渐变的颜色起始位置和颜色值，起始位置可用百分比或0-1之间的数字表示。
1）线性渐变

chart.update({
    chart:{
          backgroundColor:{
              linearGradient: ['0%', '100%', '0%', '0%'],//向上渐变
              stops: [
                        ['40%', 'rgb(150, 200, 255)'],  // 渐变颜色的起始位置与值
                        ['60%', 'rgb(250, 237, 255)']
                    ]
              }
        }
});

2）径向渐变
径向渐变使用radialGradient属性控制，radialGradient值为空。

chart.update({
    chart:{
         backgroundColor:{
            radialGradient: [],//径向渐变
            stops: [
                        [0, 'rgb(255, 255, 200)'],  // 渐变颜色的起始位置与值
                        [1, 'rgb(200, 200, 255)']
                    ]
        }
    }
});

更新颜色为径向渐变后，直接更新线性渐变，显示为线性渐变颜色值的径向渐变效果，线性渐变效果被径向渐变覆盖。解决这个问题想到的方法是先清空背景属性或给背景属性一个颜色值，再进行背景的设置。效果查看链接https://code.hcharts.cn/temp/IPEQLL

chart.update({ chart: { backgroundColor:null } });
chart.update({
    chart:{
          backgroundColor:{
              linearGradient: [0, 0, 500, 500],
              stops: [
                        [0, 'rgb(150, 200, 255)'],
                        [1, 'rgb(250, 157, 255)']
                    ]
              }
        }
});

2.数据标签格式

可以通过 format （格式化字符串）或 formatter（格式化回调函数） 属性进行修改，需要使用到的地方有：标签的文字、数据提示框的文字、坐标轴轴标签文本、图例文本。其中format字符串设置简单方便，formatter 回调函数样式灵活，但不易读取。

以设置通用的标签格式为例：

format格式：

chart.update({
        plotOptions: {
            series: {
                dataLabels: {
                    format: '<b>{series.name}</b>{percentage:.1f}%' //显示数据列名称和百分比
                }
            }
        }
    });

{percentage:,.1f}表示保留一位小数，点（.）后面的数字表示小数点位数

formatter回调函数格式：

chart.update({
        plotOptions: {
            series: {
                dataLabels: {
                    formatter: function () {
                        console.log(this);  //可以输出查看包含的字段
                        var label =this.series.name+(this.percentage?this.percentage:0).toFixed(1)+'%'; 
                        return label;
                    }
                }
            }
        }
    });

暂时先总结这些，以后有其他问题再接着补充。