设置Highcharts饼图的不透明度

Posted

技术标签:

【中文标题】设置Highcharts饼图的不透明度【英文标题】:Set opacity of Highcharts pie chart 【发布时间】:2012-01-13 05:35:52 【问题描述】:

在设置饼图的不透明度时,我遇到了 IE8 的问题。我尝试如下,

.highcharts-point 
    filter:alpha(opacity=40);

应用此功能后,饼图点变得不可见,并且它们的边框变为灰色。

有人知道解决办法吗?

【问题讨论】:

如果您找到了解决方案,那么最好将其发布为答案并接受答案。 【参考方案1】:

试试这个:

chart = new Highcharts.Chart(
  chart: 
     renderTo: 'container',
     defaultSeriesType: 'column',
     type: 'area', //this is also needed
  ,
    plotOptions: 
        series: 
            fillOpacity: 0.1
        
    , ...

jsfiddle:http://jsfiddle.net/4HkXf/1/

【讨论】:

【参考方案2】:

您可以设置系列的颜色:

var chart;
$(document).ready(function() 
   chart = new Highcharts.Chart(
      chart: 
         renderTo: 'container',
         defaultSeriesType: 'column'
      ,
      xAxis: 
        categories: ['1','2']
      ,
      plotOptions: 
         column: 
            pointPadding: 0.2,
            borderWidth: 0
         
      ,
           series: [
         name: 'Tokyo',
         data: [95.6, 54.4]

      , 
         name: 'New York',
         data: [106.6, 92.3]

      , 
         name: 'London',
         data: [59.3, 51.2]

      , 
         name: 'Berlin',
         data: [46.8, 51.1],
         color: 'rgba(150,100,50,0.5)'

      ]
   );


);

注意最后一个用颜色定义的系列。

【讨论】:

【参考方案3】:

我跟着http://highslide.com/forum/viewtopic.php?f=9&t=7622 解决了我的问题

【讨论】:

以上是关于设置Highcharts饼图的不透明度的主要内容,如果未能解决你的问题,请参考以下文章

HIGHCHARTS:drilldown.js更改饼图标签颜色

如何更改我的 highcharts 饼图的颜色?

Highcharts 3D柱形图;Highcharts 堆叠3D柱形图;Highcharts 3D饼图;Highcharts 3D圆环图

Highcharts构建空饼图

highCharts 饼图动态加载

Highcharts饼图数据为0时 ie浏览器下图例不显示 chrome下图例会显示一根棍为啥?