function load_Cylindrical_chart() {
var chart_xsys = Highcharts.chart('DivID', { //DivID即要放置图表的html元素的id
chart: {
type: 'column',
backgroundColor: '#FCFFC5' //图表的背景色,下面注释的为渐变色设置
// backgroundColor: {
// linearGradient: [0, 0, 500, 500],
// stops: [
// [0, 'rgb(255, 255, 255)'],
// [1, 'rgb(200, 200, 255)']
// ]
//},
},
title: false,
colors: ['#f7a35c', '#00BFFF', '#00FF00', '#FF00FF'],//柱状图的颜色,如果没有那么多柱状图的话,颜色会从左到右自动选取
//colors: ['red', 'black', 'green', 'yellow'],
xAxis: { //X轴的数据
categories: X_Name, //X_Name数据类型为Array
crosshair: true,
labels: {
style: { //设置字体样式
color: 'black'
//,fontWeight: 'bold'
}
}
},
yAxis: { //Y轴的样式
allowDecimals: false,
min: 0,
title: false,
tickWidth: 0,//去掉刻度
gridLineWidth: 0,//去掉y轴方向的横线
labels: {
enabled: false
}//去掉刻度数字
},
tooltip: {
// head + 每个 point + footer 拼接成完整的 table
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
legend: {
align: "top", //程度标的目标地位
verticalAlign: "top", //垂直标的目标地位
x: 0,
y: 0,
enabled: true // 图例开关
},
plotOptions: {
column: {
borderWidth: 0,
dataLabels: {
enabled: true
}
},
series: {
events: {
click: function (e) {//图表的点击事件
var name = e.point.category.split(',');
open_function(name[0], name[1]);
}
}
}
},
series: [{
name: '<b style="color:red">' + '上月' + "</b>",//设置字体样式
data: lastMonth,//lastMonth的数据类型为Array
dataLabels: {//设置柱上的数字显示样式
enabled: true,
color: 'black',
align: 'center',
x: 14,
y: 0,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}, {
name: '<b style="color:red">' + '本月' + "</b>",//设置字体样式
data: thisMonth,//thisMonth的数据类型为Array
dataLabels: {//设置柱上的数字显示样式
enabled: true,
color: 'black',
align: 'center',
x: 14,
y: 0,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
}