Highcharts：如何在柱形图中将数据标签对齐轴上方？(Highcharts : How do i align data labels above the axis in column chart

Highcharts：如何在柱形图中将数据标签对齐轴上方？(Highcharts : How do i align data labels above the axis in column chart?)

我正在高图列图表中动态绘制值。我已经显示了-90度旋转的数据标签，以避免重叠。但它存在一些问题，例如轴被切断的值。我试过了y offset选项。但这些值是动态绘制的。所以我无法将此值设置为固定值。 JS Fiddle：一个链接

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" } } }]

}）; `

`

I am plotting the values dynamically in highcharts column charts. I have displayed the data labels with -90 degree rotation to avoid the overlapping. But It has some issues like the values are cut off by the axis. I have tried the y offset option. But The values are plotted dynamically. So I couldn't set this value as fixed one. 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" } } }]

}); `

`

最满意答案

尝试将yAxis类型设置为logarithmic，将minorTickInterval设置为0.1。对数刻度完全适合这种类型的数据。让我们看下面的代码：

yAxis: { type: 'logarithmic', minorTickInterval: 0.1, title: { text: 'Population (millions)' } },

这是你重构的JSFiddle： https ：//jsfiddle.net/daniel_s/x5oxyt2v/

最好的祝福！

Try to set yAxis type to logarithmic, and its minorTickInterval to 0.1. Logarithmic scale fits to this type of data perfectly. Lets look at code below:

yAxis: { type: 'logarithmic', minorTickInterval: 0.1, title: { text: 'Population (millions)' } },

Here is your refactored JSFiddle: https://jsfiddle.net/daniel_s/x5oxyt2v/

Best Regards!

更多推荐