javascript - Highcharts sunburst - 覆盖全局颜色

标签 javascript highcharts sunburst-diagram

是否可以覆盖旭日图的全局图表颜色?我尝试了多种方法,但似乎都不起作用。

请检查这个 fiddle :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;
});

最佳答案

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

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

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

API引用:https://api.highcharts.com/highcharts/colors

关于javascript - Highcharts sunburst - 覆盖全局颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55575062/

相关文章:

python - 有没有办法改变plotly.express.sunburst图中叶子的不透明度?

javascript - document.write() 的替代用途

javascript - 使用 .htpasswd 锁定 .user.js 文件

javascript - 按钮函数调用另一个函数

javascript - D3.js 可缩放旭日不缩放

javascript - 我正在尝试使用 Tornado 数据制作旭日图

javascript - 使用 pdfmake 将文本修复到 pdf 中最后一页的底部

javascript - Highcharts:如何使系列免于重绘缩放计算?

javascript - Highcharts 文本气泡

javascript - Highcharts:无法修改直方图工具提示