Question

我正在使用Highcharts并且在通过我的主题应用x轴标签样式时遇到问题...如果我在创建图表时应用它，它可以正常工作..但主题选项似乎只对x有效轴。相同的样式适用于y轴。

以下代码。谢谢！

主题

Highcharts.theme = {
    chart: {
        zoomType: 'x'
    },
    plotOptions: {
        column: {
            borderColor: null,
            borderWidth: 1,
            borderRadius: 3,
            shadow: true
        },
        line: {
            lineWidth: 3,
            shadow: false,
            marker: {
                radius: 10
            }
        }
    },
    xAxis: {
        gridLineColor: '#ebebeb',
        lineColor: '#ebebeb',
        minorGridLineColor: '#ebebeb',
        tickColor: '#ebebeb',
        plotLines: [{
            color: '#ebebeb'
        }],
        showLastLabel: true,
        labels: {
            style: {
                color: '#525151',
                font: '12px Helvetica',
                fontWeight: 'bold'
            },
            formatter: function () {
                return this.value;
            }
        },
        title: {
            text: "TEST"
        }
    },
    yAxis: {
        gridLineColor: '#ebebeb',
        lineColor: '#ebebeb',
        minorGridLineColor: '#ebebeb',
        tickColor: '#ebebeb',
        plotLines: [{
            color: '#ebebeb'
        }],
        labels: {
            style: {
                color: '#525151',
                font: '12px Helvetica',
                fontWeight: 'bold'
            },
            formatter: function () {
                return this.value;
            }
        },
        title: {
            text: null
        }
    }
};

// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

我正在应用的图表：

chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'showChart'
        },
        colors: [{
            linearGradient: perShapeGradient,
            stops: [
                        [0, 'rgba(32, 106, 166, 0.3)'],
                        [1, 'rgba(32, 106, 166, 0)']
                        ]
        }, {
            linearGradient: perShapeGradient,
            stops: [
                        [0, 'rgba(120, 99, 181, 0.3)'],
                        [1, 'rgba(120, 99, 181, 0)']
                        ]
        },
                ],
        xAxis: [{
            type: 'datetime',
            labels: {
                formatter: function () {
                    var monthStr = Highcharts.dateFormat('%l:%M %P', this.value);
                    return monthStr;
                }
            }
        }],
        series: [{
            name: 'Public Views',
            type: 'area',
            marker: {
                symbol: 'url(/Assets/images/marker_blue.png)'
            },
            pointInterval: 3600000, // one hour
            pointStart: Date.UTC(2009, 9, 6, 0, 0, 0),
            data: [502, 435, 309, 247, 302, 434, 568, 702, 935, 809, 647, 502, 834, 526, 302, 335, 409, 647, 702, 634, 668, 902, 935, 1009]
        }, {
            name: 'Company Views',
            type: 'area',
            marker: {
                symbol: 'url(/Assets/images/marker_purple.png)'
            },
            pointInterval: 3600000, // one hour
            pointStart: Date.UTC(2009, 9, 6, 0, 0, 0),
            data: [406, 307, 211, 133, 221, 367, 366, 506, 707, 611, 333, 221, 567, 466, 106, 107, 281, 433, 221, 567, 466, 606, 607, 811]
        }]
    });

Answer 1

yAxis: [{
        gridLineColor: '#ebebeb',
        lineColor: '#ebebeb',
        minorGridLineColor: '#ebebeb',
        tickColor: '#ebebeb',
        plotLines: [{
            color: '#ebebeb'
        }],
        labels: {
            style: {
                color: '#525151',
                font: '12px Helvetica',
                fontWeight: 'bold'
            },
            formatter: function () {
                return this.value;
            }
        },
        title: {
            text: null
        }
    }]

注意yAxis大括号周围的额外[]。 x不需要。因为yAxis可能有第二个y轴。

Highcharts - 无法将样式应用于x轴标签

1 个答案: