我有一张无法显示所有值的高位柱形图-在这个例子中,我试图尽可能地简化它。我使用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
});
这是一个小提琴:https : //jsfiddle.net/ypw4gx1h/
一些数据标签未显示,因为它们会与附近的数据标签重叠。带柱形图默认dataLabels.allowOverlap
设置为false
。您可以true
像这样在代码中将其更改为(JSFiddle示例):
plotOptions: {
series: {
dataLabels: {
enabled: true,
allowOverlap: true
}
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句