Highcharts:如何在柱形图中将数据标签对齐到轴上方?
Highcharts : How do i align data labels above the axis in column chart?
我在 highcharts 柱形图中动态绘制值。我已经显示了 -90 度旋转的数据标签以避免重叠。但是它有一些问题,比如值被轴切断。
我试过 y 偏移选项。但是这些值是动态绘制的。所以我无法将此值设置为固定值。
JS Fiddle : a link
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'World\'s largest cities per 2014'
},
subtitle: {
text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
},
series: [{
name: 'Population',
data: [
['Shanghai', 2341.7],
['Lagos', 165.1],
['Istanbul', 14.2],
['Karachi', 14.0],
['Mumbai', 12.5],
['Moscow', 12.1],
['São Paulo', 11.8],
['Beijing', 11.7],
['Guangzhou', 11.1],
['Delhi', 11.1],
['Shenzhen', 10.5],
['Seoul', 10.4],
['Jakarta', 10.0],
['Kinshasa', 9.3],
['Tianjin', 9.3],
['Tokyo', 9.0],
['Cairo', 8.9],
['Dhaka', 8.9],
['Mexico City', 8.9],
['Lima', 8.9]
],
dataLabels: {
useHTML:true,
crop:false,
enabled: true,
rotation: -90,
color: '#000000',
inside:true,
style: {
fontFamily: 'Verdana, sans-serif',
fontWeight: "bold"
, fontSize: "15px"
}
}
}]
});
`
<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto">
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
`
尝试将yAxis类型设置为logarithmic,并将其minorTickInterval设置为0.1。对数刻度非常适合此类数据。让我们看看下面的代码:
yAxis: {
type: 'logarithmic',
minorTickInterval: 0.1,
title: {
text: 'Population (millions)'
}
},
这是您重构的 JSFiddle:https://jsfiddle.net/daniel_s/x5oxyt2v/
此致!
将 align 属性设置为 "left" 可能有效。
dataLabels: {
align: "left"
}
我在 highcharts 柱形图中动态绘制值。我已经显示了 -90 度旋转的数据标签以避免重叠。但是它有一些问题,比如值被轴切断。
我试过 y 偏移选项。但是这些值是动态绘制的。所以我无法将此值设置为固定值。
JS Fiddle : a link
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'World\'s largest cities per 2014'
},
subtitle: {
text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
},
series: [{
name: 'Population',
data: [
['Shanghai', 2341.7],
['Lagos', 165.1],
['Istanbul', 14.2],
['Karachi', 14.0],
['Mumbai', 12.5],
['Moscow', 12.1],
['São Paulo', 11.8],
['Beijing', 11.7],
['Guangzhou', 11.1],
['Delhi', 11.1],
['Shenzhen', 10.5],
['Seoul', 10.4],
['Jakarta', 10.0],
['Kinshasa', 9.3],
['Tianjin', 9.3],
['Tokyo', 9.0],
['Cairo', 8.9],
['Dhaka', 8.9],
['Mexico City', 8.9],
['Lima', 8.9]
],
dataLabels: {
useHTML:true,
crop:false,
enabled: true,
rotation: -90,
color: '#000000',
inside:true,
style: {
fontFamily: 'Verdana, sans-serif',
fontWeight: "bold"
, fontSize: "15px"
}
}
}]
});
`
<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto">
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
`
尝试将yAxis类型设置为logarithmic,并将其minorTickInterval设置为0.1。对数刻度非常适合此类数据。让我们看看下面的代码:
yAxis: {
type: 'logarithmic',
minorTickInterval: 0.1,
title: {
text: 'Population (millions)'
}
},
这是您重构的 JSFiddle:https://jsfiddle.net/daniel_s/x5oxyt2v/
此致!
将 align 属性设置为 "left" 可能有效。
dataLabels: {
align: "left"
}