【问题标题】:Highcharts sunburst - override global colorsHighcharts sunburst - 覆盖全局颜色
【发布时间】:2019-04-08 13:52:20
【问题描述】:

是否可以覆盖旭日形图的全局图表颜色?我尝试了多种方法,但似乎都没有奏效。

请检查这个小提琴:https://jsfiddle.net/max1tdzh/

chart: {
    height: '100%',
    colors: ['#ff0000', '#00ff00', '#0000ff']
},    
plotOptions: {
    series: {
         colors: ['#ff0000', '#00ff00', '#0000ff']
     },
     sunburst: {
         colors: ['#ff0000', '#00ff00', '#0000ff']
     }
},

我尝试过设置 chart.colors、plotOptions.sunburst.colors 和 plotOptions.series.colors,但似乎都不起作用。

有效的是在 series.data 数组中的特定数据点上设置颜色属性,但这个解决方案并不好,因为它需要使用这样的自定义辅助函数循环所有元素:

let colorIndex = 0;
return data.map((point) => {
    if (!point.parent) {
        const color = colors[colorIndex % colors.length];
        colorIndex++;
        return { ...point, color };
    }
    return point;
});

【问题讨论】:

    标签: javascript highcharts sunburst-diagram


    【解决方案1】:

    您需要直接在图表配置对象中设置颜色:

    Highcharts.chart('container', {
        colors: ['#ff0000', '#00ff00', '#0000ff'],
        chart: {
            height: '100%',
        },
        ...,
        plotOptions: {...}
    });
    

    现场演示:https://jsfiddle.net/BlackLabel/be61rtz2/

    API 参考:https://api.highcharts.com/highcharts/colors

    【讨论】:

    • API 之后,我们也应该能够在plotOptions.sunburst.colors 中定义颜色。也许这是一个错误?
    • 天哪,谢谢!我从文档中弄错了,但我同意 Core972 也应该可以通过 plotOptions 设置它...但无论如何,谢谢
    • 嗨,是的,这个问题看起来像一个错误。我在这里创建了一个问题:github.com/highcharts/highcharts/issues/10522
    猜你喜欢
    • 2017-12-03
    • 2014-09-27
    • 2014-08-02
    • 1970-01-01
    • 2013-05-27
    • 2019-07-14
    • 1970-01-01
    • 2020-11-28
    • 2013-02-09
    相关资源
    最近更新 更多