【问题标题】:Highcharts: how to change text and background colorsHighcharts:如何更改文本和背景颜色
【发布时间】: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 代码中的文本和背景颜色。谢谢。

【问题讨论】:

    标签: javascript highcharts


    【解决方案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 论坛上也得到了很好的帮助。
    猜你喜欢
    • 2018-12-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-30
    • 1970-01-01
    • 2013-05-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多