先上效果图:
<script type="text/javascript" language="javascript">
$(function(){
/*图表部分*/
var data = [29.9, 21.5, 26.4, 29.2, 24.0, 36.0, 35.6, 48.5, 26.4, 44.1, 45.6, 14.4,18.93, 31.5, 37.4,];
var data2 = [-18.93, 11.5, 17.4, 19.2, 14.0, 16.0, 15.6, 18.5, 16.4, 14.1, 19.6, 14.4,19.9, 11.5, 16.4];
var categories = ['7-9', '7-10' ,'7-12', '7-14', '7-18', '8-12', '8-20', '8-24', '9-5', '9-26', '10-7', '10-24', '10-30', '11-4', '11-6'];
var renderChart1 = function(data, data2, categories) {
$('#container').highcharts({
chart: {
//type: 'spline',//带状图
theme:'default'//主题默认
},
title: {
text: ''//标题为空
},
exporting: {//导出按钮是否可用
enabled: false
},
xAxis: {
categories: categories || [],//x轴刻度
tickInterval: categories ? (categories.length - 1) : 0//步长,步长是总长度-1就可以实现只有两端的数据了
},
yAxis: {
title: {
text: ''
},
labels: {//y轴刻度文字标签
formatter: function () {
return this.value + '%';//y轴加上%
}
},
plotLines: [{//区域划分线,0刻度
value: 0,
width: 1,
color: '#3582d9'
}]
},
credits: {
enabled: false//右下角图表版权信息不显示
},
tooltip: {
valueSuffix: '%'//标示框后缀加上%
},
legend: {
layout: 'horizontal',//图注,垂直方向,就是横一排,horizontal是水平方向,竖一排
align: 'center',//水平居中
verticalAlign: 'bottom',//垂直对齐
borderWidth: 1,//边框宽度是1
borderColor: '#9f9f9f',//边框颜色
borderRadius: 5//边框圆角
},
series: [{
name: '收益1',
data: data || [],
color: '#ff9022',
marker: { enabled: false }
}, {
name: '收益2',//曲线标题
data: data2 || [],//数据
color: '#64B8FF',//数据线颜色
marker: { enabled: false }//曲线上的圆点表示不可见
}],
plotOptions: {
line: {
events: {
legendItemClick: function () {
return false;//点击图注不会使曲线不可见,默认可以为true
}
},
showInLegend: true//是否显示图注
}
}
});
};
renderChart1(data,data2,categories);//图表绘画
});
Highcharts.theme = {
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']//这里是设置曲线的颜色,优先顺序是由前向后,如果在数据列内部设置颜色,这里将不可用
}
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);//应用曲线的主题颜色
</script>
附加: