效果图:
图表的配置:
var chart = Highcharts.chart('container',{
chart: {
type: 'column'
},
"plotOptions": {
column: {
dataLabels: {
enabled: true,
allowOverlap: true, // 允许数据标签重叠
formatter: function(){
if(this.y>0){
return "<spam style='color:#39C46E'>+"+this.y+"%</span>"
}else{
return "<spam style='color:#F5475B'>"+this.y+"%</span>"
}
}
}
}
},
title: {
text: '包含负值的柱形图'
},
"xAxis": {
categories: ['苹果', '橘子', '梨', '葡萄', '香蕉'],
"gridLineColor": "#1E1F2F",
"gridLineWidth": 0,
"lineColor": "#1E1F2F",
"minorGridLineColor": "#1E1F2F",
"minorTickColor": "#1E1F2F",
"tickColor": "#1E1F2F",
// "visible": false,
"alignTicks": true,
"allowDecimals": true,
// "opposite": true,
"labels": {
"style": {
"color": "#ffffff",
"fontSize": "13px"
}
}
},
"yAxis": {
"gridLineColor": "#2D2E3D",
"lineColor": "#2D2E3D",
"alignTicks": true,
"minorGridLineColor": "#1d1e2f",
"showEmpty": false,
"showFirstLabel": false,
"showLastLabel": false,
"reversedStacks": false,
"reversed": false,
"visible": false,
"title": {
"style": {
"fontFamily": "Default",
"color": "#9c27b0",
"fontSize": "18px",
"fontWeight": "normal",
"fontStyle": "normal"
}
}
},
"tooltip": {
"style": {
"color": "#FFFFFF"
},
"borderRadius": 0,
"borderWidth": 1,
"borderColor": "#2D2E3D",
"backgroundColor": "rgba(30, 31, 47, 0.85)"
},
series: [{
name: '小张',
data: [
{
// x: 1,
y: 8,
name: "Point2",
color: "#00FF00"
}, {
// x: 2,
y: -10,
name: "Point1",
color: "#FF00FF"
},{
// x: 2,
y: 0,
name: "Point1",
color: "#FF00FF"
}
]
}]
});