Question

我在highcharts柱形图中动态绘制值。我已经显示了-90度旋转的数据标签，以避免重叠。但它存在一些问题，例如轴被切断的值我尝试了y偏移选项。但这些值是动态绘制的。所以我无法将此值设置为固定值。
JS小提琴：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>

`

Answer 1

将align属性设置为“left”可能有效。

dataLabels: {
    align: "left"
}

见这里：https://jsfiddle.net/t15eg1qm/3/

Answer 2

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

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

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

最诚挚的问候！

Highcharts：如何在柱形图中将数据标签对齐轴上方？

2 个答案: