Highcharts {pie} - 仅用于切片切片的样式

时间:2017-02-09 11:54:10

标签: highcharts

我正在使用 Highcharts - pie

如何为切片切片创建样式...例如:3D边框或其他内容?

  

我想要什么

enter image description here

  

正常切片

enter image description here

  

jsFiddle

PS:由于我是这些高级图表的新手,我们非常感谢您的帮助。

代码

$(function() {    
  $(document).ready(function() {    
    // Build the chart
    $('#container').highcharts({
      chart: {
        type: 'pie',
      },
      title: {
        text: 'Test'
      },
      tooltip: {
        pointFormat: ''
      },
      plotOptions: {
        pie: {
          cursor: 'pointer',
          slicedOffset:30,
        }
      },
      series: [{
        borderWidth: 0,
        name: 'Brands',
        data: [{
          name: 'IE',
          y: 56.33
        }, {
          name: 'Chrome',
          y: 24.03,          
          sliced:true
        }, {
          name: 'Firefox',
          y: 10.38
        }]
      }]
    });
  });
});

1 个答案:

答案 0 :(得分:1)

您可以使用selected属性,然后为highcharts-point-select类设置css。

点配置

{ 
  name: 'Chrome',
  y: 24.03,          
  sliced:true,
  selected: true
}

CSS

.highcharts-point-select {
  stroke: red;
  stroke-width: 3
}

示例:http://jsfiddle.net/xe8zqv3n/