具有渐变颜色填充的 highcharts 极坐标图答案

【问题标题】：highcharts polar chart with gradient color fills具有渐变颜色填充的 highcharts 极坐标图
【发布时间】：2018-02-16 13:22:26
【问题描述】：

我已按照 HighChart 示例 here 在饼图上进行渐变颜色填充，但在极坐标图上使用渐变填充时遇到问题。见我的demo here

问题 #1：在第一个图表上，渐变发生在每个单独的楔形上，而不是整个极坐标图的中心。

问题 #2：在第二张图表上，如果我为每个楔形定义颜色，我不会得到任何渐变填充。

data: [
    {y: 1, color: 'red'},
    {y: 2, color: 'blue'},
    {y: 3, color: 'orange'},
    {y: 4, color: 'green'},
    {y: 5, color: 'gray'},
    {y: 4, color: 'brown'}
]

如何让渐变填充从图表的中心开始工作并为每个楔形设置不同的颜色？

【问题讨论】：

标签： highcharts

【解决方案1】：

对于第一个问题 -> 使用LINEAR GRADIENTS，因为它是一种柱形图。

对于第二个问题 -> 如果您在数据系列中定义颜色，highcharts 不知道。在你定义径向颜色的函数中

Highcharts.getOptions().colors

这里使用了highcharts的默认颜色。如果你想使用自定义颜色，你必须先更新 highcharts 默认颜色。

出于演示目的，我更新了第二张图表的plotOptions

plotOptions: {
        series: {
            pointStart: 0,
            pointInterval: 60
        },
        column: {
            pointPadding: 0,
            groupPadding: 0,
            colorByPoint: true //added this
        }
    },

Fiddle演示

【讨论】：

感谢@Deep 3015 的回复，但线性渐变仍然不正确。每个楔子从左到右从亮到暗。我试图从图表中心到每个楔形的周边从浅到深。 Example
好的，我必须为此目的定义自定义渐变。一旦我做的正确，我会更新
您好，请检查此jsfiddle.net/q1k13wLb 列，不带极坐标类型。我想你想要这样。但是当它使用 Polar 类型更新时，结果与您的预期不同