javascript Highcharts -- 无法将样式应用于 x 轴标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11460200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts -- Can't apply style to x axis labels
提问by Adam Storr
I'm working with Highcharts and am having trouble applying x axis label styles through my theme... it works correctly if I apply it when I create a chart.. but the theme options seem to be ignored only for the x axis. The same styles work correctly for the y axis.
我正在使用 Highcharts 并且在通过我的主题应用 x 轴标签样式时遇到问题......如果我在创建图表时应用它，它可以正常工作......但主题选项似乎只对 x 轴被忽略。相同的样式适用于 y 轴。
Code below. Thanks!
代码如下。谢谢！
Theme
主题
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);
And the chart I'm applying it to:
以及我将其应用于的图表：
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]
}]
});
回答by ras
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
}
}]
Note the extra [] around the braces for yAxis. Not required for x. As yAxis could have a second y axis.
请注意 yAxis 大括号周围的额外 []。x 不需要。因为 yAxis 可以有第二个 y 轴。
