问题:使用highcharts做柱状图的时候,后端返回数据相差倍数很大,有些数据值非常小。导致数据值很小的不显示图表。
解决
需要在highcharts的配置加如下代码
plotOptions: {
series: {
minPointLength: 5, //数据值小需要加这段代码上去
}
}
完整代码
HighCharts.chart('volume', {
title: {
text: ''
},
chart: {
type: 'column'
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
xAxis: {
//表示为时间,注意大小写
type: 'datetime',
dateTimeLabelFormats: {
millisecond: "%H:%M:%S.%L",
second: "%H:%M:%S",
minute: "%H:%M",
hour: "%H:%M",
day: "%m-%d",
week: "%m-%d",
month: "%Y-%m",
year: "%Y"
},
labels: {
style: {
color: '#7a8793'
}
}
},
yAxis: {
opposite: true,
title: {
text: ''
},
// tickPixelInterval: self.tickPixelInterval,
max: self.volumeMax,
labels: {
formatter: function () {
let tempValue = this.value;
let formatValut = self.toPretty(tempValue) || 0
let formatString = "$" + `${formatValut}` + `${self.toPrettyUnit(tempValue)}`;
return formatString;
},
style: {
color: '#7a8793'
}
}
},
plotOptions: {
series: {
minPointLength: 5,
point: {
events: {
mouseOver: function (e) {
self.curX = this.x
self.curY = this.y
}
}
},
events: {
mouseOut: function () {
if (this.chart.lbl) {
this.chart.lbl.hide();
}
self.resetColumnBg(this)
self.curX = ''
self.curY = ''
}
}
}
},
series: [
{
color: {
linearGradient: { x1: 0, x2: 0, y1: 1, y2: 0 },
stops: [
[0, 'rgba(0, 184, 164, 0)'],
[1, 'rgba(0, 184, 164, 0.3']
]
},
states: {
hover: {
color: {
linearGradient: { x1: 0, x2: 0, y1: 1, y2: 0 },
stops: [
[0, 'rgba(0, 184, 164, 0)'],
[1, 'rgba(0, 184, 164, 1']
]
}
}
},
data: self.chartFormat
}
]
});