0
我可以用Highcharts创建一个这样的图表吗? Expect result自定义Highcharts xaxis标签
其实我自己也和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
},
\t \t \t \t \t lineColor: 'transparent',
minorTickLength: 0,
\t \t \t \t \t tickLength: 0,
\t \t 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,
\t \t \t \t \t tickLength: 0,
gridLineColor: 'transparent',
},
tooltip: {
enabled: false
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
align: 'right',
color:'black',
x: 30
}
},
series: {
stacking: 'normal',
\t 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>
见我DEMO
太好了!这是一个非常聪明的解决方法!谢谢! – Mars