Question

我正在努力做一些我认为在Highcharts中应该很简单的事情。我希望背景为深灰色，所有轴标签，标题等文本都是浅灰色。

我几乎可以通过添加大量的“颜色”声明来实现这一点，但是...这似乎是重复的，我确信有更好的方法。

 $(function () {
    $('#container').highcharts({
        chart: {
            type: 'line',
            // WHY CAN't I SET A GLOBAL "COLOR" HERE?
            backgroundColor: '#272b30'
        },
        title: {
            text: "Title Title",
            align: 'left',
            style: {
                // DEFINE IT ONCE FOR THE TITLE
                color: '#99aabb'
            }
        },
        legend: {
            // DEFINE AGAIN FOR LEGEND BORDER
            borderColor: '#99aabb',

            // AND FOR LEGEND ITEMS
            itemStyle: {
                color: '#99aabb'
            }
        },
        xAxis: {
            categories: ["2016", "2017", "2018", "2019", "2020"]                
        },
        yAxis: {
            title: {
                text: 'axis label',
                style: {
                    // DEFINE ONE MORE FOR THE AXIS LABEL
                    color: '#99aabb'
                }
            }    
        },
        series: [{
            name: 'Series',
            data: [61, 55, 67, 88, 59]
        }, {
            name: 'Other Series',
            data: [20, 15, 17, 22, 28]
        }, ]
    });
});

我相信我错过了一些非常明显的东西！

Answer 1

您可以使用itemStyle为图例着色，例如：

legend: {
            itemStyle: {
                color: '#000000',
                fontWeight: 'bold'
            }
        },

请参阅文档Highchart Options Reference

Answer 2

你实际上可以通过编程方式进行...只是一个能为你减轻基色的小功能：

function shadeColor(color, percent) {   
    var num = parseInt(color,16),
    amt = Math.round(2.55 * percent),
    R = (num >> 16) + amt,
    G = (num >> 8 & 0x00FF) + amt,
    B = (num & 0x0000FF) + amt;
    return (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (G<255?G<1?0:G:255)*0x100 + (B<255?B<1?0:B:255)).toString(16).slice(1);
}

然后设置并使用基色作为变量

var baseColor = '272b30'

现在你可以动态地生成你的皮肤。

 $(function () {
    $('#container').highcharts({
        chart: {
            type: 'line',
            // WHY CAN't I SET A GLOBAL "COLOR" HERE?
            backgroundColor: '#' + baseColor
        },
        title: {
            text: "Title Title",
            align: 'left',
            style: {
                // DEFINE IT ONCE FOR THE TITLE
                color: '#' + shadeColor(baseColor,70)
            }
        },
        legend: {
            // DEFINE AGAIN FOR LEGEND BORDER
            borderColor: '#' + shadeColor(baseColor,70),

            // AND FOR LEGEND ITEMS
            itemStyle: {
                color: '#' + shadeColor(baseColor,70)
            }
        },
        xAxis: {
            categories: ["2016", "2017", "2018", "2019", "2020"]                
        },
        yAxis: {
            title: {
                text: 'axis label',
                style: {
                    // DEFINE ONE MORE FOR THE AXIS LABEL
                    color: '#' + shadeColor(baseColor,70)
                }
            }    
        },
        series: [{
            name: 'Series',
            data: [61, 55, 67, 88, 59]
        }, {
            name: 'Other Series',
            data: [20, 15, 17, 22, 28]
        }, ]
    });
});

Answer 3

您可以定义全局变量，它将保持颜色，然后使用定义的变量设置主题。

http://www.highcharts.com/demo/line-basic/grid

但是你仍然必须明确地对每个组件进行主题化以获得该变量的颜色。

我可以为Highcharts中的所有文本设置默认颜色吗？

3 个答案: