我绘制了一个堆积柱形 Highcharts 。该图表工作正常,但存在一些样式问题。 Y 轴名称显示在图表上方,因此未显示副标题我需要在下面显示 Y 轴名称。我该如何更改此设置?提前感谢您的帮助...
这是我的代码
<script type="text/javascript">
$(function () {
$('#chart_div').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Material Vs Subcategory'
},
subtitle: {
text: 'Source: www.test.com'
},
xAxis: {
categories: ['Air Filtration','Clothing','Sporting Goods','Home Furnishings','Paint','Storage','Toys and Games']
},
yAxis: {
min: 0,
title: {
text: 'Number of Products'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Unclassifiable',
data: [0, 1, 0, 0, 1, 0, 0]
},{
name: 'Aluminium',
data: [0, 0, 0, 0, 0, 0, 0]
},{
name: 'Calcium',
data: [0, 0, 0, 1, 0, 0, 0]
},{
name: 'Copper',
data: [0, 0, 0, 0, 0, 0, 0]
},{
name: 'Gold',
data: [0, 1, 0, 0, 1, 1, 0]
},{
name: 'Iron',
data: [0, 0, 0, 0, 0, 0, 0]
},{
name: 'Platinum',
data: [0, 0, 0, 0, 1, 0, 1]
},{
name: 'Silver',
data: [0, 3, 3, 0, 0, 0, 0]
},{
name: 'Steel',
data: [1, 0, 0, 1, 0, 0, 0]
},{
name: 'Unknown',
data: [0, 1, 0, 0, 1, 0, 0]
}]
});
});
</script>
最佳答案
去掉“ float ”和 x/y 位置也使它看起来更干净:
legend: {
verticalAlign: 'bottom',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
关于javascript - 更改Highchart堆积柱形图的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20882619/