为什么我的标签不在同一高度
Why my label are not at the same height
我的问题是关于我制作的柱形图..
我不明白为什么我的标签没有设置在高度上..
我尝试了很多东西,但我真的不知道..
在这里你可以找到一个例子:jsfiddle project
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
height: 200
},
title: {
text: 'Monthly Average Rainfall'
},
xAxis: {
offset: 0,
labels: {
useHTML: true,
rotation: 0
},
tickmarkPlacement: 'on',
gridLineWidth: 0,
lineWidth: 0,
tickPosition: 'outside'
},
yAxis: {
gridLineWidth: 0,
plotLines: [{
color: '#DDDDDD',
width: 1,
value: 0
}],
max: 0.92,
labels: {
enabled: false
},
title: {
text: ''
}
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'black',
verticalAlign: 'top',
useHTML: true,
y: -20
}
},
},
series: [{
showInLegend: false,
negativeColor: '#F14646',
color: '#00B76C',
pointWidth: 40,
data: [0.01, 0.03, 0.03, 0.05, 0.03, 0.10, 0.11, 0.11, 0.15, 0.92]
}]
})
});
});
谢谢!!
似乎 plotOptions.column.stacking = 'normal'
和 plotOptions.column.y: -20
造成了大部分麻烦。所以,首先你应该设置 plotOptions.column.y: 0
(或删除它)。其次,您可以执行以下操作之一
- 如果您实际上不需要它,请完全删除
plotOptions.column.stacking
- 一些列标签可能仍显示在栏内而不是上方,这是因为栏上方没有足够的 space - 一种选择是将
yAxis.max
设置为足够大的值保证 space
- 如果您确实需要堆叠,请改用
yAxis.stackLabels.enabled: true
(如果它们干扰,请移除 plotOptions.column.dataLabels
)
见相关Highcharts yAxis.stackLabels option documentation and their stacked column chart example.
我的问题是关于我制作的柱形图.. 我不明白为什么我的标签没有设置在高度上.. 我尝试了很多东西,但我真的不知道.. 在这里你可以找到一个例子:jsfiddle project
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
height: 200
},
title: {
text: 'Monthly Average Rainfall'
},
xAxis: {
offset: 0,
labels: {
useHTML: true,
rotation: 0
},
tickmarkPlacement: 'on',
gridLineWidth: 0,
lineWidth: 0,
tickPosition: 'outside'
},
yAxis: {
gridLineWidth: 0,
plotLines: [{
color: '#DDDDDD',
width: 1,
value: 0
}],
max: 0.92,
labels: {
enabled: false
},
title: {
text: ''
}
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'black',
verticalAlign: 'top',
useHTML: true,
y: -20
}
},
},
series: [{
showInLegend: false,
negativeColor: '#F14646',
color: '#00B76C',
pointWidth: 40,
data: [0.01, 0.03, 0.03, 0.05, 0.03, 0.10, 0.11, 0.11, 0.15, 0.92]
}]
})
});
});
谢谢!!
似乎 plotOptions.column.stacking = 'normal'
和 plotOptions.column.y: -20
造成了大部分麻烦。所以,首先你应该设置 plotOptions.column.y: 0
(或删除它)。其次,您可以执行以下操作之一
- 如果您实际上不需要它,请完全删除
plotOptions.column.stacking
- 一些列标签可能仍显示在栏内而不是上方,这是因为栏上方没有足够的 space - 一种选择是将
yAxis.max
设置为足够大的值保证 space
- 一些列标签可能仍显示在栏内而不是上方,这是因为栏上方没有足够的 space - 一种选择是将
- 如果您确实需要堆叠,请改用
yAxis.stackLabels.enabled: true
(如果它们干扰,请移除plotOptions.column.dataLabels
)
见相关Highcharts yAxis.stackLabels option documentation and their stacked column chart example.