我正在高图列图表中动态绘制值。 我已经显示了-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" } } }]}); `
<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>`
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" } } }]}); `
<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/
最好的祝福!
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!
更多推荐
发布评论