所有零值的条形图标签对齐(Bar chart label alignment for all the zero values)

所有零值的条形图标签对齐(Bar chart label alignment for all the zero values)

我使用高图表库作为条形图。 除了一件事以外，一切工作都很好。 当条中的所有值都为'ZERO'时，对齐已变为右侧。 我想让它左对齐。 对于任何非零值，它都按预期工作。

这是小提琴

Highcharts.chart('container', { chart: { type: 'bar' }, title: { text: 'Historic World Population by Region' }, subtitle: { text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>' }, xAxis: { categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], title: { text: null }, }, yAxis: { min: 0, title: { text: 'Population (millions)', align: 'high' }, labels: { overflow: 'justify', align:'left' } }, tooltip: { valueSuffix: ' millions' }, plotOptions: { bar: { dataLabels: { enabled: true } } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -40, y: 80, floating: true, borderWidth: 1, backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), shadow: true }, credits: { enabled: false }, series: [{ name: 'Year 1800', data: [0, 0, 0, 0, 0] }] });

任何帮助，将不胜感激。

I am using high-chart library for bar chart. Everything is working fine except one thing. When all the values in bar are 'ZERO', the alignment has changed into right side. I want to make it left align. For any non zero values it's working as expected.

Here is the Fiddle

Highcharts.chart('container', { chart: { type: 'bar' }, title: { text: 'Historic World Population by Region' }, subtitle: { text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>' }, xAxis: { categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], title: { text: null }, }, yAxis: { min: 0, title: { text: 'Population (millions)', align: 'high' }, labels: { overflow: 'justify', align:'left' } }, tooltip: { valueSuffix: ' millions' }, plotOptions: { bar: { dataLabels: { enabled: true } } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -40, y: 80, floating: true, borderWidth: 1, backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), shadow: true }, credits: { enabled: false }, series: [{ name: 'Year 1800', data: [0, 0, 0, 0, 0] }] });

Any help would be appreciated.

最满意答案

如果所有值均为0 ，则无法计算max ，因此Highcharts将在中间渲染值。 您可以通过设置yAxis.max或yAxis.softMax演示强制标签在左侧呈现： https ： yAxis.softMax

If all values are 0, then max can not be calculated, so Highcharts will render values in the middle. You can force labels to be rendered on the left by setting yAxis.max or yAxis.softMax, demo: https://jsfiddle.net/BlackLabel/mvp1ebsj/1/