HighCharts常用方法总结

最新推荐文章于 2025-04-11 11:40:49 发布

小飞鹤

最新推荐文章于 2025-04-11 11:40:49 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端框架文章标签： HighCharts

本文链接：https://blog.youkuaiyun.com/he90227/article/details/41350013

前端框架专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了高德纳图表的配置与优化技巧，包括X轴文字的倾斜放置、柱形图的宽度与边框设定、柱形颜色的统一与分开设置、Y轴数值的限制与等分方式、柱形图Y轴数值的显示位置调整、图例的布局改变，以及实际项目案例的应用。通过实例解析，帮助开发者更高效地定制图表以满足不同需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

 
xAxis: {
 
                labels: {
 
                    rotation: -90   //竖直放
 
                    rotation: -45   //45度倾斜
 
                }
 
            }

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里设置

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

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

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

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

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

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

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

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

 
    1 //整体即显示在区域右边中间
 
  
 
    2 legend: {
 
  
 
    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


        }]
    });
}
   
 
   
 
  