highCharts.JS

适用于移动端的highCharts框架

代码调用

var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
margin: [80, 100, 60, 100],
zoomType: 'xy'
},
exporting: {
//去掉右上角的打印及其导出按钮
enabled:false
},
credits: {
//去掉右下角的highcharts.com
enabled:false
},
title: {
text: '',
style: {
margin: '10px 0 0 0' // center it
}
},
subtitle: {
//text: 'Source: WorldClimate.com',
style: {
margin: '0 0 0 0' // center it
}
},
xAxis: [{
categories: ['10月11日', '12', '13', '14', '15', '16', '17']
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E', display:'none'
}
},
title: {
text: '',
style: {
color: '#89A54E'
},
margin: 60
}
}, { // Secondary yAxis
title: {
text: '',
margin: 70,
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value +' mm';
},
style: {
color: '#4572A7', display:'none'
}
},
opposite: true
}],
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +
(this.series.name == 'Rainfall' ? ' mm' : '°C');
}
},
legend: {
layout: 'vertical',

itemStyle : {
'fontSize' : '16px'
},
//enabled : false,
style: {
left: '50px',
bottom: 'auto',
right: 'auto',
top: '20px'
},
backgroundColor: '#FFFFFF'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: '新病例',
color: '#ee4a5a',
type: 'column',
yAxis: 1,
data: [249.9, 271.5, 806.4, 129.2, 244.0, 276.0, 235.6]

}, {
name: '老病例',
color: '#00b494',
type: 'column',
yAxis: 1,
data: [149.9, 71.5, 206.4, 229.2, 244.0, 276.0, 235.6]

},{
name: '环比',
color: '#ffcb10',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2]
},{
name: '同比',
color: '#48b9ff',
type: 'spline',
data: [7.0, 9.5, 21.5, 14.5, 18.2, 6.9, 25.2]
}]
});


//事件
$('#new').click(function(){
chart.series[1].hide();
chart.series[0].show();
})
$('#old').click(function(){
chart.series[1].show();
chart.series[0].hide();
})
});