highcharts图表组件如何设置某个数据点的颜色或者数据标签的颜色值

最新推荐文章于 2025-06-06 09:16:46 发布

转载最新推荐文章于 2025-06-06 09:16:46 发布 · 2w 阅读

本文详细介绍了如何使用 Highcharts 图表组件来设置特定数据点的颜色及数据标签属性，包括针对单个数据点和所有数据点的不同设置方法。

转自：http://www.stepday.com/topic/?439

highcharts图表组件如何设置某个数据点的颜色或者数据标签的颜色值

作者： highcharts | 时间：2013-5-14 13:15:37 | [ 小大] | 来源：highcharts |

阅读：13966 |

评论： 0 |

highcharts 图表组件数据点颜色

[ 摘要]：这里着重讲解关于highcharts数据点样式问题：一、针对某个数据点设置其样式代码如下： series: [{ data: [{ y:29.9, //数据点的Y轴值 fillColor:'red' //数据点实心的颜色值主要是针对线性图而言 }, 71.5 ] 效果图如下：二、针对全部数据点设置样式代码如下： $(function () { $('#container').highcharts({ chart: { mar...

这里着重讲解关于highcharts数据点样式问题：

一、针对某个数据点设置其样式

代码如下：

 
       1.
       series: [{
      
       2.
       data: [{
      
       3.
       y:29.9, //数据点的Y轴值
      
       4.
       fillColor:'red' //数据点实心的颜色值 主要是针对线性图而言
      
       5.
       }, 71.5
      
       6.
       ]

效果图如下：

设置某个数据点实心圆属性效果图

二、针对全部数据点设置样式

代码如下：

 
       01.
       $(function () {
      
       02.
       $('#container').highcharts({
      
       03.
        
       04.
       chart: {
      
       05.
       marginRight: 50
      
       06.
       },
      
       07.
        
       08.
       series: [{
      
       09.
       data: [23, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6,23],
      
       10.
       marker:{
      
       11.
       fillColor:'red' //设置所有数据点的颜色值
      
       12.
       }
      
       13.
       }]
      
       14.
        
       15.
       });
      
       16.
       });

效果图如下：

设置所有数据点实心圆属性效果图

三、设置某个数据点标签的属性

代码如下：

 
       01.
       $(function () {
      
       02.
       $('#container').highcharts({
      
       03.
        
       04.
       chart: {
      
       05.
       marginRight: 50
      
       06.
       },
      
       07.
        
       08.
       series: [{
      
       09.
       data: [34, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, {
      
       10.
       dataLabels: {
      
       11.
       enabled: true,
      
       12.
       color:'red',
      
       13.
       align:'left',
      
       14.
       verticalAlign: 'middle'
      
       15.
       },
      
       16.
       y: 0
      
       17.
       }]
      
       18.
       }]
      
       19.
        
       20.
       });
      
       21.
       });

效果图如下：

设置某个数据标签的属性效果图