var chart;
$(function () {
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: '正标题'
},
subtitle: {
text: 'Source: www.stepday.com'
},
//这里配置了多个X轴
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
title: {
text: '月份',
style: {
color: '#89A54E'
}
}
}, {
categories: ['X', 'Y', 'Z', 'W', 'V', 'I',
'J', 'K', 'L', 'M', 'N', 'O'],
title: {
text: '字母',
style: {
color: '#89A54E'
}
},
opposite: true //对立面 表示显示在上方 不写默认显示在底部
}],
yAxis: [{
labels: {
formatter: function () {
return this.value + '°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}],
tooltip: {
formatter: function () {
return '' +
this.x + ': ' + this.y +
(this.series.name == 'Rainfall' ? ' mm' : '°C');
}
},
credits: {
text:"www.stepday.com",
href:'http://www.stepday.com/myblog/?highcharts'
},
series: [{
name: 'Rainfall',
color: '#4572A7',
type: 'column',
xAxis: 1,//第二个X轴
data: [-30, -40, 0, -129.2, -144.0, -176.0, -35.6, -48.5, -16.4, -94.1, -5.6, -4.4]
}, {
name: 'Temperature',
color: '#89A54E',
type: 'column',
data: [0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});
});
Highcharts 实现双X轴
最新推荐文章于 2022-09-28 19:32:34 发布