折线柱状混合图
想要达到的效果:
代码
chart3 = Highcharts.chart('Funds_to_adjust_year', {
chart: {
type: 'column',
marginLeft:50,
marginRight:25
},
credits: {
enabled: false // 禁用版权信息
},
legend: {
align: 'right', //水平方向位bai置
verticalAlign: 'top', //垂直方向位置
x: 0, //距离x轴的距离
y: 0 //距离Y轴的距离
},
title: {
text: null
},
xAxis: {
categories: ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: null
}
},
tooltip: {
shared: true,
formatter: function (data) {
return '<span>' + this.points[0].series.name + '<span> </span><strong>'+this.points[0].y + '</strong></span><span> </span><span>' + this.points[1].series.name +'<span> </span><strong>'+ this.points[1].y + '</strong></span><span><br/>' + this.points[2].series.name + '<span> </span><strong>'+((this.points[2].y / this.points[0].y) * 100).toFixed(0) + '%' + '</strong></span>';
}
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
},
series: [{name: '预算',color: '#C1D1FA',type: 'column',data: [5, 8, 12, 10, 16, 14, 21, 9, 8, 24, 28],pointPadding: 0, pointPlacement: 0,tooltip: {valueSuffix: '万'}, },
{name: '预算执行',color: '#3367EF',type: 'column',data: [3, 4, 4, 2, 5, 4, 7, 3, 4, 6, 7],pointPadding: 0,pointPlacement: 0,tooltip: {valueSuffix: '万'}, },
{name: '预算执行率',color: '#F5CA31',type: 'line',data: [3, 4, 4, 2, 5, 4, 7, 3, 4, 6, 7],tooltip: {valueSuffix: '%'},}]
});
详细参数配置,请参考官方文档:highcharts官方地址https://api.highcharts.com.cn/highcharts