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

最新推荐文章于 2025-02-26 13:42:08 发布

dusea

最新推荐文章于 2025-02-26 13:42:08 发布

阅读量2w

点赞数 2

转自：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. 
       });