Highcharts：删除绘图边框和实际图表之间的空间 [英] Highcharts: Remove space between plot border and actual chart

问题描述

我们正在从基于Flash的图表库（FusionCharts）迁移到基于JavaScript的图表（HighCharts）。

这就是我们目前的flash图表看起来像

这就是HighCharts已经到目前为止。

我可以删除情节边界和实际图表数据之间的空间（用大哑红色箭头标记）吗？

以下是我的代码： http://jsfiddle.net/ChrisMBarr/7JAcN/1/

  var chart = new Highcharts.Chart（{
图表：{
 renderTo：'container'，
 type：'areaspline'，
 plotBorderWidth：1，
 spacingTop：2，
 spacingRight：5，
 spacingBottom：5，
 spacingLeft：2，
 borderWidth：1，
 borderRadius： 0，
 borderColor：'＃999'
}，
学分：{
启用：false 
}，
 title：{
 text ：'过去7天内的垃圾邮件总数'
}，
图例：{
 verticalAlign：'bottom'，
 borderWidth：1，
 backgroundColor：'#FFFFFF'
}，
 xAxis：{
 allowDecimals：假，
类别：[
'星期四2/14'，
'星期五2/15'，
'星期六2/16'，
'星期日2 / 17'，
'Mon 2/18'，
'Tue 2/19'，
'Wed 2/20'
]，
标签：{
 staggerLines：2 
}，
 tickmarkPlacement：'on'，
}，
 yAxis：{
 allowDecimals：false，
 alternateGridColor：'＃ F7F7F7'，
标题：{
 text：'电子邮件数量'，
保证金：5 
} 
}，
工具提示：{
格式化程序：function（）{
 var isSpam = this.series.name === _chartOptions.series [1] .name 
 return''+ this.x +'：< strong>'+ this.y +（isSpam？ 垃圾邮件：）+'电子邮件< / strong>'; 
} 
}，
 
 plotOptions：{
 areaspline：{
 fillOpacity：0.5 
} 
}，
 
系列：[{
name：Total Mail，
color：＃339999，
data：[2,3,4， 7,8,8,8] 
}，{
name：垃圾邮件，
color：＃003399，
data：[2 ，2,4,4,4,6,8] 
}] 
}）; 
  

解决方案

  xAxis：{
 min：0.5，max：5.5 
 ... 
  

其中max =数据点数减1.5

We are migrating from a flash based charting library (FusionCharts) to a JavaScript based one (HighCharts).

This is what our current flash charts look like

And this is what I've got so far with HighCharts.

How can I remove the space (marked with big dumb red arrows) between the plot border and the actual chart data?

Here's my code: 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]
        }]
    });

解决方案

This might help:

xAxis: {
    min: 0.5, max: 5.5
...

where max = number of data point minus 1.5

这篇关于Highcharts：删除绘图边框和实际图表之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！