Highcharts：如何更改文本和背景颜色

Posted 2023-03-10

【中文标题】Highcharts：如何更改文本和背景颜色

【英文标题】：Highcharts: how to change text and background colors

【发布时间】：2018-09-16 22:43:52

【问题描述】：

我是 Highcharts 的新手，我正在使用一个非常简单的 Highcharts 条形图，它显示了水平堆叠的两列。我想更改背景颜色和字体颜色。文档显示了这样的示例：

Highcharts.setOptions(
    chart: 
        style: 
            fontFamily: 'monospace',
            color: "#f00"
        
        etc . . . 

但 Highcharts.setOptions 对我正在使用的 javascript 代码没有帮助：

    <div id="container" style="width:100%; height:400px;"></div>

    <script>
    $(function ()  
        var myChart = Highcharts.chart('container', 
            chart: type: 'bar',
            title: text: 'Chart Title',
            xAxis: categories: ['Category1<br>Category2'],
            yAxis: title: text: 'Value'
            ,

            series: [name: 'Cat1',data: [4.2],
            name: 'Cat2',data: [5691.7]]
        );
    );
    </script>

如果我只是在 yAxis 下方插入一个背景颜色指令（背景颜色：#000000），图形就会从屏幕上消失。

所以我的问题是如何更改上面显示的 Highcharts js 代码中的文本和背景颜色。谢谢。

【参考方案1】：

你不能写 background-color: #000000 但 'background-color': '#000000' 或 backgroundColor: '#000000' 可以工作

chart: 
  type: 'bar',
  backgroundColor: '#000000',
  style: 
    fontFamily: 'monospace',
    color: "#f00" // This line won't work. You must set color for each element like title, axis labels ...
  

Fiddle

【讨论】：

Core972，非常感谢您在 Fiddle 上发布的示例代码。它对我有用，但我没有同时看到两个栏。我现在正在努力，但如果你能告诉我原因，我将非常感激。再次感谢您的帮助。

顺便说一句，这是一个对数刻度，所以我将您的代码更改为： yAxis: title: text: 'Time in Seconds - Logarithmic Sc​​ale', type: 'logarithmic', color: '#FFFFFF ' 但没有对数刻度

@RTC222 ，我用对数轴更新了小提琴，它的工作原理

非常感谢。我在 Highcharts 论坛上也得到了很好的帮助。