Question

我做了一些相关的研究但是被卡住了。我正在尝试将高图表格式化为＃75f094的文本颜色。我有以下css代码：

@import 'https://code.highcharts.com/css/highcharts.css';

... Other CSS styling...

/* Highcharts Styling */
.highcharts-title {
    fill: #434348;
    color: #75f094;
    font-weight: bold;
    letter-spacing: 0.3em;
    font-size: 1em;
}
.highcharts-subtitle {
    font-family: 'Courier New', monospace;
    color: #75f094;
    font-style: italic;
    fill: #7cb5ec;
}

.highcharts-axis.highcharts-color-0 text {
    fill: #75f094;
}

和相应的javascript代码：

$(function() {

    var x_values = [];
    var y_values = [];
    var switch1 = true;
    $.get('php/values.php', function(data) {

        data = data.split('/');
        for (var i in data)
        {
            if (switch1 == true)
            {
                //var ts = timeConverter(data[i]);
                ts = (data[i]);
                //console.log(ts);
                x_values.push(ts);
                switch1 = false;
            }
            else
            {
                y_values.push(parseFloat(data[i]));
                console.log(data[i]);
                switch1 = true;
            }

        }
        x_values.pop();

        $('#contentRight').highcharts({
            chart : {
                type : 'spline'
            },
            title : {
                text : 'Last 24hrs Usage'
            },
            subtitle : {
                text : 'Source: ESP8266db'
            },
            xAxis : {
                title : {
                    text : 'Time'
                },
                categories : x_values
            },
            yAxis : [{
                max: 100,
                className: 'highcharts-color-0',
                title : {
                    text : '% Light'
                },
                labels : {
                    formatter : function() {
                        return this.value + ' %'
                    }
                }
            }],
            tooltip : {
                crosshairs : true,
                shared : true,
                valueSuffix : ''
            },
            plotOptions : {
                spline : {
                    marker : {
                        radius : 4,
                        lineColor : '#666666',
                        lineWidth : 1
                    }
                }
            },
            legend: {
              enabled: false
            },
            series : [{

                name : 'Temperature',
                data : y_values
            }]
        });
    });
});

它不会使图表风格化，它只是默认颜色。 CSS正确地附加到HTML页面，因为它为页面的其余部分设置样式。有什么想法，我出错了吗？浏览器是Chrome，而不是Firefox。 THX。

Answer 1

看起来highcharts使用SCSS将轴颜色应用为元素上的样式。因此，您可以更新SCSS中的中性色：

$neutral-color-60: #666666 !default; // Axis labels, axis title, connector fallback.

或者您可以将!important添加到您的CSS样式中。它对color使用fill和highcharts-axis-title，因此它是：

.highcharts-axis-title {
  color: #75f094 !important;
  fill: #75f094 !important;
}

Highcharts CSS Styling Axis字体

1 个答案: