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

debugcn 发表于 Dev

杰罗姆·普罗旺斯

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

最好用一个例子来解释。

谢谢！

迈克·扎瓦雷洛（Mike Zavarello）

您可能要看一下使用极坐标图（请参阅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' }
            ]
        }]
    });
});