我们正在从基于 Flash 的图表库 (FusionCharts) 迁移到基于 JavaScript 的图表库 (HighCharts)。
这就是我们当前的闪存图表的样子
这就是我迄今为止对 HighCharts 的了解。
如何删除绘图边框和实际图表数据之间的空格(标有大哑红色箭头)?
这是我的代码:http: //jsfiddle.net/ChrisMBarr/7JAcN/1/
var chart = new Highcharts.Chart({
chart:{
renderTo: 'container',
type: 'areaspline',
plotBorderWidth: 1,
spacingTop:2,
spacingRight:5,
spacingBottom:5,
spacingLeft:2,
borderWidth:1,
borderRadius:0,
borderColor:'#999'
},
credits: {
enabled: false
},
title: {
text: 'Total spam in the last 7 days'
},
legend: {
verticalAlign: 'bottom',
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
xAxis: {
allowDecimals:false,
categories: [
'Thu 2/14',
'Fri 2/15',
'Sat 2/16',
'Sun 2/17',
'Mon 2/18',
'Tue 2/19',
'Wed 2/20'
],
labels: {
staggerLines: 2
},
tickmarkPlacement: 'on',
},
yAxis: {
allowDecimals:false,
alternateGridColor: '#F7F7F7',
title: {
text: 'Number of Emails',
margin:5
}
},
tooltip: {
formatter: function() {
var isSpam = this.series.name === _chartOptions.series[1].name
return ''+this.x +': <strong>'+ this.y +(isSpam ? " Spam" : "") +' Emails</strong>';
}
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
"name": "Total Mail",
"color":"#339999",
"data": [2,3,4,7,8,8,8]
},{
"name": "Spam",
"color":"#003399",
"data": [2,2,4,4,4,6,8]
}]
});