我可以用Highcharts创建这样的图表吗?预期结果
实际上,我自己对Highcharts做过类似的事情,但是当我自定义Highcharts xaxis标签时遇到了问题,在这方面有人可以帮助我吗?
$(function () {
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: null
},
xAxis: {
categories: ['VISIONLINK', 'PRODUCT LINK WEB', 'CAT DAILY', 'NOT CONNECTED'],
title: {
text: null
},
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
labels: {
useHTML: true,
formatter: function() {
return '<strong class="hc-label">' + this.value + '</strong>';
}
}
},
yAxis: {
min: 0,
title: {
text: null,
align: 'high'
},
labels: {
enabled: false,
},
minorTickLength: 0,
tickLength: 0,
gridLineColor: 'transparent',
},
tooltip: {
enabled: false
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
align: 'right',
color:'black',
x: 30
}
},
series: {
stacking: 'normal',
pointWidth: 50,
pointPadding: 0,
}
},
legend: {
enabled:false
},
credits: {
enabled: false
},
series: [{
name: 'VISIONLINK',
data: [20,null,null,null]
}, {
name: 'PRODUCT LINK WEB',
data: [null,40,null,null]
}, {
name: 'CAT DAILY',
data: [null,null,200,null]
},
{
name: 'NOT CONNECTED',
data: [null,null,null,40]
}]
});
});
.hc-label {
background-color: #efefef;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
见我的演示
这是可以实现的,但是我认为,与直接定制轴标签相比,使用第二个系列模拟标签可能更容易。
模仿标签的系列的配置如下:
, {
color: '#efefef',
enableMouseTracking: false,
showInLegend: false,
data: [
['VISIONLINK', 50],
['PRODUCT LINK WEB', 50],
['CAT DAILY', 50],
['NOT CONNECTED', 50]
],
dataLabels: {
format: '{key}'
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句