我正在使用类似bullet chart
的highchart
进度图表以某种方式实现它以使其看起来像进度图表,但问题是当我的系列数据接近相等时,它会相互重叠。请看附件图片
有什么方法可以在子弹图上提供填充,这样数据就不会重叠?
$("#progress").highcharts({
chart: {
inverted: true,
marginLeft: 30,
type: 'bullet'
},
title: {
text: null
},
legend: {
enabled: false
},
yAxis: {
tickPositions: [0, 3000, 3100, 4000],
gridLineWidth: 0,
title: "",
useHTML: true,//Set to true
style: {
width: '50px'
}
}, xAxis: {
minorGridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
},
plotOptions: {
series: {
borderWidth: 0,
borderRadius: 10,
color: '#819bc2',
targetOptions: {
width: '10%'
},
grouping: false
}
},
exporting: { enabled: false },
credits: { enabled: false },
series: [{ "data": [{ "y": 4000, "target": 4000, "color": "#ccd8e9" }] }, { "data": [{ "y": 3100, "target": 3100, "color": "#ff4666" }] }, { "data": [{ "y": 3000, "target": 3000, "color": "#2F9AD0" }] }],
tooltip: {
useHTML: true,
backgroundColor: null,
borderWidth: 0,
positioner: function (labelWidth, labelHeight, point) {
var tooltipX = point.plotX - 40;
var tooltipY = point.plotY - 20;
return {
x: tooltipX,
y: tooltipY
};
},
pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="progress"></div>