Question

我需要设置与前一个堆栈相关的堆栈柱形图的颜色。考虑一下这个小提琴。 http://jsfiddle.net/0n7g4a1e/

series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2],
        stack: 'Actual'
    }, {
        name: 'John',
        data: [3, 4, 4, 2, 5],
        stack: 'Budget'
    }]

如果简 - 实际为浅绿色，简 - 预算应为深绿色。这应该适用于所有类别，Apple通过香蕉。同样，如果约翰 - 阿克塔尔是浅蓝色，约翰 - 预算应该是深蓝色。

如何做到这一点？我不想指定每个点颜色，我选择自动颜色很好，只是bugdet系列应该比实际颜色更暗。

感谢。

Answer 1

您需要以这种方式为Highcharts设置颜色，例如，基于默认颜色：

var colors = Highcharts.getOptions().colors.slice(0), // get default colors
    dark = -0.5;


colors[1] = Highcharts.Color(colors[0]).brighten(dark).get(); // using Highcharts.Color(), get darker golor, using first color as base

colors[3] = Highcharts.Color(colors[2]).brighten(dark).get();

现在只需设置这些颜色：

$('#container').highcharts({

    chart: {
        type: 'column'
    },

    colors: colors,

演示：http://jsfiddle.net/0n7g4a1e/2/

Answer 2

您可以将十六进制颜色用作：

                var colors = [];
                colors[0] = '#ff0000';
                colors[1] = '#ff6600';

然后使用：

                Highcharts.chart('your_char_id', {
                    chart: {
                        type: 'column'
                    },
                    colors: colors,

Answer 3

colors = ['#195594', '#a4d3fd', '#dde0e0'];

然后

Highcharts.chart('your_char_id', {
    chart: {
        type: 'column'
    },
    colors: this.colors,
});

在highcharts

3 个答案: