高图饼图与部分彩色片

Question

我想知道是否有可能创建一个饼图，其中每个片的部分颜色，以表示如何“完成”（在％）该片。

这可能更好地解释一个例子。

谢谢！

Answer 1

你可能想看看使用极坐标图（见http://www.highcharts.com/demo/polar）。

尝试使用Highcharts演示中的“列”系列作为起点;那就是应该让你最接近你想要实现的版本。您可以使每个点具有不同的颜色以符合您的示例。

更新（2016年5月29日）：我的工作你比如像上严格基于样本小提琴：https://jsfiddle.net/brightmatrix/uzna0mk6/

这是我从Highcharts'极坐标图演示修改了代码。它不是100％完美的，因为楔形标签在你的示例图像中格式化会很棘手，但这应该会让你变得相当不错。

我希望这有助于！

$(function() { 
    $('#container').highcharts({ 
     chart: { polar: true }, 
     title: { text: 'Highcharts polar chart with colored wedges' }, 
     legend: { enabled: false }, 
       plotOptions: { 
       // starts the chart at the 12-o-clock position 
      pointPlacement: 'on' 
     }, 
     xAxis: { 
       type: 'category', 
      categories: ['series A','series B','series C','series D','series E'], 
     }, 
     yAxis: { 
      min: 0, max: 100, 
      labels: { enabled: false } 
     }, 
     plotOptions: { 
      series: { 
       dataLabels: { 
        enabled: true, 
        inside: true, 
        verticalAlign: 'middle' 
       }, 
       // keeps the pie wedges joined together 
       pointPadding: 0, 
       groupPadding: 0, 
       stacking: 'normal' 
      } 
     }, 
     series: [{ 
      type: 'column', 
      name: 'background fill for the wedges', 
      data: [18,30,45,47,5], 
      color: '#BCBCBC', 
      enableMouseTracking: false, // prevent the user from interacting with this series 
      dataLabels: { enabled: false } 
     }, { 
      type: 'column', 
      name: 'wedge value', 
      data: [ 
       // each slice of the pie gets its own color 
       { y: 82, color: 'blue' }, 
       { y: 70, color: 'purple' }, 
       { y: 55, color: 'orange' }, 
       { y: 53, color: 'yellow' }, 
       { y: 95, color: 'green' } 
      ] 
     }] 
    }); 
});