带有部分彩色切片的 Highchart 饼图

Question

我想知道是否可以创建一个饼图，其中每个切片都被部分着色，以表示该切片的“完整”程度（以 % 为单位）。

最好举例说明。

谢谢！

Answer 1

您可能希望使用 极坐标图 （参见 http://www.highcharts.com/demo/polar）。

尝试使用 Highcharts 演示中的 "column" 系列作为起点；这是应该让您最接近您想要实现的目标的版本。您可以为每个点设置不同的颜色以匹配您的示例。

更新（2016 年 5 月 29 日）： 我严格根据您的示例图像制作了一个示例 fiddle：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' }
            ]
        }]
    });
});

带有部分彩色切片的 Highchart 饼图

Highchart Pie chart with partially colored slices

highcharts

pie-chart