HighCharts常用方法总结

来源：互联网发布：java 断点编辑：程序博客网时间：2024/05/29 19:16

1. X轴文字斜着放，在xAxis里设置

1xAxis: {
2                labels: {
3                    rotation: -90   //竖直放
4                    rotation: -45   //45度倾斜
5                }
6            }

1.1 X轴设置步调 --- 每隔几个显示一次

在设置x轴时加一个step属性 xAxis: {             type: 'datetime',    gridLineWidth: 1,    labels: {           step:4,                   formatter: function() { return  Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value); }             }         },

2. 柱形图柱形的宽度和边框，在plotOptions里设置

1plotOptions: {
2    column: {
3                pointWidth: 30,     //设置柱形的宽度
4        borderWidth: 0      //设置柱子的边框，默认是1
5    }
6}

3.柱形图柱子的颜色，可以统一设置，也可以分开设置，在series里设置

01<span style="color:#E53333;"></span>//统一设置，可以在highcharts.js里设置默认值，也可以针对一个柱形图来设置
02series: [{
03    color:'#f00',   //柱形图颜色统一设为红色
04    data:[11,12,13,14,15,16,17]
05}]
06 
07//分开设置，每个柱子颜色不一样，需要把颜色值存到数据库里
08series: [{
09                data: [{'color':'#F6BD0F','y':11},
10                            {'color':'#AFD8F8','y':12},
11                            {'color':'#8BBA00','y':13},
12                            {'color':'#FF8E46','y':14},
13                            {'color':'#008E8E','y':15},
14                            {'color':'#D64646','y':16},
15                            {'color':'#8E468E','y':17}],
16            }]

4.Y轴的值不能为小数、且按固定数值来等分，在yAxis里设置

1yAxis: {
2    min: 0,                  //不显示负数
3    allowDecimals:false,     //不显示小数
4    tickInterval: 1         //Y轴值按1来等分
5}

5.柱形图每个Y轴值显示柱子上的位置，在series的dataLabels里设置

view source
print?
01//显示在柱子的正上方
02series: [{
03    data:[11,12,13,14,15,16,17],
04    dataLabels: {
05        enabled: true,    //默认是false，即默认不显示数值
06        color: '#666',    //字体颜色
07        align: 'center'   //居柱子中间
08   }
09}]
10 
11//显示在柱子上
12//在上面基础上再加一个属性，y:20，就是设置数值显示的位置

6.图例说明，默认显示在下面，如果要显示在右边，

1//整体即显示在区域右边中间
2legend: {
3    layout:'vertical',         //竖直显示，默认是水平显示的
4    align: 'right',            //图例说明在区域的右边，默认在中间
5    verticalAlign: 'middle'    //竖直方向居中，默认在底部
6}
实际项目案例展示：

function show24Data(dataX,dataY){//24小时实时在线统计$('#online24Statistics').highcharts({        chart: {            type: 'spline'        },        title: {            text: '24小时实时在线'        },        subtitle: {            text: '实时在线统计'        },        xAxis: {            categories: dataX,            labels:{            step:4,        //x轴 每隔4个刻度 显示一次            rotation: -45   //45度倾斜,可取 ：  -180~180            }        },        yAxis: {            title: {                text: '在线人数'            },            labels: {                formatter: function() {                    return this.value +''                }            }        },        tooltip: {            crosshairs: true,            shared: true,        },        plotOptions: {            spline: {                marker: {                    radius: 4,                    lineColor: '#666666',//                    lineColor:'rgb(85, 191, 59)',                    lineWidth: 1                }            }        },        series: [{            name: '在线人数',//            color: '#16CEE7',            lineColor:'rgb(85, 191, 59)',            marker: {                symbol: 'square'            },            data: dataY        }]    });}

0 0