2013-02-04 45 views
2

我有一个Highcharts饼图在这里:Highcharts - 在哪里放置风格和样式改变为一个楔形饼图

1)我不是很满意:http://jsfiddle.net/6PbbR/52/

$(function() { 

    var chart; 
    $(document).ready(function() { 

     // Radialize the colors 
    Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) { 
     return { 
      radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 }, 
      stops: [ 
       [0, color] 
      ] 
     }; 
    }); 

    // Build the chart 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false, 
       shadow: true, 
        }, 
      tooltip: { 
       enabled: false 
      }, 
      title: { 
       text: "" 
      }, 
      plotOptions: { 
       pie: { 
        allowPointSelect: true, 
        size:'68%', 
        cursor: 'pointer', 
        shadow: true, 
        dataLabels: { 
         enabled: true, 
         distance: -40, 
         style: { 
         width: '100px' 
        }, 
         color: '#fff', 
         connectorColor: '#000000', 
         formatter: function() { 
          return '<b style="font-family:arial;font-size:10px;font-weight:bold">'+ this.point.name +'</b> '; 
         } 
        } 
       } 
      }, 
      series: [{ 
       type: 'pie', 
       name: 'Income Investments', 
       data: [ 
        ['FLOATING RATE FUNDS', 16.667], 
        { 
         name: 'Corporate Capital Trust', 
         y: 16.667, 
         sliced: true, 
         selected: true 
        },          
        ['BONDS', 16.667], 
        ['ANNUITIES',  16.667], 
        ['REITs', 16.667], 
        ['CDs',  16.667] 
       ] 
      }], 

     colors: [ 
        '#83a3c6', 
         '#98012e', 
        '#19699b', 
        '#ae9e8e', 
        '#5283b0', 
        '#958370' 
         ], 
     }); 
    }); 

}); 

两个问题我如何在plotOptions中插入内联样式{pie {formatter。哪里可以更好的使用API​​来代替暴力内联风格?

2)我想改变红色楔形的字体系列(可能修改它的定位/边距)。这样做的最好方法是什么?

编辑:理想情况下,我可以完成我的需要,无需去上述功能。是否可以使用API​​将样式附加到一个数据点?

回答

1

这是一个简单的html,所以你可以添加一个classid,然后使用css样式。

JS

formatter: function() { 
    return '<b id="myTooltipId">'+ this.point.name +'</b> '; 
} 

CSS

#myTooltipId { 
    font-family: arial; 
    font-size: 10px; 
    font-weight:bold 
} 

更新

里面格式化你可以使用this切片性能。
所以你只需要检查片是否是你想要的片。

formatter: function() { 
    // key is the slice name 
    if (this.key == 'CDs') { 
     return '<b id="myTooltipId">'+ this.point.name +'</b> '; 
    } else { 
     return this.value; 
    } 
} 
+0

我可以通过为每个饼形楔生成一个唯一的ID来修改它。这样,我可以将字体更改为一个楔形,而不是全部。 我必须将这个关闭传递给另一个开发人员,我必须希望他们能够正确地将css添加到他们的工作表中。所以,我宁愿在API中做所有事情,但我不确定我可以只将样式附加到一个数据点。我想这是我真正的问题。 – Jamie

+0

@Jamie所以看看我的更新。 –

+0

这对我的应用程序非常有用,谢谢! – Jamie