highcharts / highstock 列不显示所有数据标签
highcharts / highstock column doesn't show all datalabels
我有一个 highstock 柱形图,它没有显示所有值 - 对于这个示例,我已尝试尽可能地简化它。我正在使用 highstock,因为我需要在列上有一个水平滚动条。
$('#container').highcharts({
tooltip: {
formatter: function () {
if (this.y === '' && this.y !== 0) {
return this.series.name + '<br/>' + this.x + ': NO DATA';
}
return this.series.name + '<br/>' + this.x + ': ' + this.y;
}
},
chart: {
type: 'column'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: labels,
title: {
text: null
},
labels: {
style: {
color: '#000',
}
},
lineWidth: 2,
lineColor: '#000',
tickWidth: 2,
tickLength: 12,
tickColor: '#000',
startOnTick: true,
},
yAxis: {
title: {
text: 'test',
align: 'middle',
style: {
color: '#000',
}
},
labels:{enabled: false},
style: {
color: '#000',
},
gridLineColor: 'transparent',
lineWidth: 2,
lineColor: '#000',
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100,
floating: false,
borderWidth: 0,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: series
});
这是一个fiddle:https://jsfiddle.net/ypw4gx1h/
一些数据标签没有显示,因为它们会与附近的数据标签重叠。默认情况下,柱形图 dataLabels.allowOverlap
设置为 false
。您可以在您的代码中将其更改为 true
,如下所示 (JSFiddle example):
plotOptions: {
series: {
dataLabels: {
enabled: true,
allowOverlap: true
}
}
}
我有一个 highstock 柱形图,它没有显示所有值 - 对于这个示例,我已尝试尽可能地简化它。我正在使用 highstock,因为我需要在列上有一个水平滚动条。
$('#container').highcharts({
tooltip: {
formatter: function () {
if (this.y === '' && this.y !== 0) {
return this.series.name + '<br/>' + this.x + ': NO DATA';
}
return this.series.name + '<br/>' + this.x + ': ' + this.y;
}
},
chart: {
type: 'column'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: labels,
title: {
text: null
},
labels: {
style: {
color: '#000',
}
},
lineWidth: 2,
lineColor: '#000',
tickWidth: 2,
tickLength: 12,
tickColor: '#000',
startOnTick: true,
},
yAxis: {
title: {
text: 'test',
align: 'middle',
style: {
color: '#000',
}
},
labels:{enabled: false},
style: {
color: '#000',
},
gridLineColor: 'transparent',
lineWidth: 2,
lineColor: '#000',
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100,
floating: false,
borderWidth: 0,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: series
});
这是一个fiddle:https://jsfiddle.net/ypw4gx1h/
一些数据标签没有显示,因为它们会与附近的数据标签重叠。默认情况下,柱形图 dataLabels.allowOverlap
设置为 false
。您可以在您的代码中将其更改为 true
,如下所示 (JSFiddle example):
plotOptions: {
series: {
dataLabels: {
enabled: true,
allowOverlap: true
}
}
}