Highcharts 笔记

图例白色,第二种方法是饼状图

//方法一：
legend: { 
    itemStyle:{
        color:"#fff"
    }
},
//方法二：
plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            style: {
                color: "#fff",
                textOutline: "none"
            }
        }
    }
},

背景透明

chart: { 
    backgroundColor: 'rgba(0,0,0,0)'
},

颜色为渐变

var colors = ['#76d0ff','#90ebff','#9ff0f5','#58dad0','#caf0c2' ];
Highcharts.getOptions().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 
        ]
    };
});

x轴和y轴的字体颜色

xAxis: { 
    labels: { 
        style:{
            color:"#fff"
        }
    }
},

图例位置更改

legend: {
    layout: 'horizontal',// 图例数据项的布局。布局类型： "horizontal" 或 "vertical" 即水平布局和垂直布局 默认是：horizontal (ps：就是横竖排列)
    align: 'right',// 设定图例在图表区中的水平对齐方式，合法值有left，center 和 right。
    verticalAlign: 'top', // 垂直对齐标准
    y: -20, // 水平偏移
    x:0, // 竖直偏移
    itemMarginTop: 5, // 图例项顶部外边距
    itemMarginBottom: 3, // 图例项底部外边距
    floating: true, // 是否浮动，浮动则在图表中显示图例 
}, 

x轴文字旋转度数

xAxis: { 
    labels: { 
        rotation: 0    
    }
},

图例设置边框和颜色（注意大小写）

legend: {
    borderWidth: 1, 
    borderColor:"#fff", 
},

x轴和y轴的轴颜色

xAxis: {   
    lineColor: '#38edff' 
},