与部分色的切片的Highchart圆形统计图表

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' }
            ]
        }]
    });
});