javascript - Highcharts AreaSpline - 在图表和绘图区域之间添加填充

Question

我正在尝试在我的图表和绘图区域之间添加填充，正如您在下面的屏幕截图中看到的那样，标记溢出了绘图区域的边界。

有没有办法在绘图区域的底部添加填充，或者有什么方法可以稍微向上移动图表系列以使其不会溢出？

这是一个 fiddle :http://jsfiddle.net/H3Asy/5/

这是JS代码:

    $('#container').highcharts({
        chart: {
            type: 'areaspline',
            marginLeft: 25,
            plotBorderWidth: 2,
            plotBackgroundColor: {
                linearGradient: [0, 0, 0, 178],
                stops: [
                    [0.5, 'rgb(255, 255, 255)'],
                    [1, 'rgb(221, 221, 221)']
                ]
            },
            events: {
                load: function(){
                    this.plotBackground.attr({ rx: 15, ry: 15 });
                    this.plotBorder.attr({ rx: 15, ry: 15 });
                }
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        exporting: { 
            enabled: false 
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22],
            lineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0,
            labels: {
                rotation: -90,
                align: 'right',
                style: {
                    fontSize: '12px',
                    fontWeight: 'bold',
                    fontFamily: 'Sterling, sans-serif',
                    color: '#999'
                },
                x: 5,
                y: 28
            }

        },
        yAxis: {
            title: {
                text: ''
            },
            labels: {
                formatter: function() {

                    if(this.isFirst) {
                        return this.value;
                    }

                    return bytesToSize(this.value, 0, true);
                },
                style: {
                    fontSize: '12px',
                    fontWeight: 'bold',
                    fontFamily: 'Sterling, sans-serif',
                    color: '#999'
                },
                align: 'center',
                x: -16,
                y: 12

            },
            gridLineColor: 'transparent'
        },
        tooltip: {
            shared: true,
            formatter: function() {

                var tooltip = $('<div>');
                var total = 0;

                $.each(this.points, function(i, point){
                    total += this.y;

                    tooltip.append($('<div style="color: ' + point.series.area.fill + ';">').html(point.series.name + ': ' + bytesToSize(this.y,2)));

                    if(!(i % 2)){
                        tooltip.append('<br />');
                    }

                });

                tooltip.prepend($('<div style="color: #999;">').html('Total: ' + bytesToSize(total,2) + '<br />'));

                return tooltip.get(0).outerHTML;
            }

        },
        plotOptions: {
            areaspline: {
                lineWidth: 1.3,
                marker: {
                    states: {
                        hover: {
                            radius: 5
                        }
                    }
                },
                states: {
                    hover: {
                        lineWidth: 1.3
                    }
                }
            }
        },
        series: [{
            name: 'Download',
            fillColor: 'rgba(0, 140, 194, 0.3)',
            lineColor: '#008cc2',
            data: [0,4815834355,23055591595,0,0,15404821463,0,20217522975,5521887522,0,0,1371666239,2134496,0,2948406184,12384283037,8231543133,9268703354,11368292543,1747717890,4540649201,4705338812]

        }, {
            name: 'Upload',
            fillColor: 'rgba(117, 0, 198, 0.4)',
            lineColor: '#7500c6',
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: false
                    }
                }
            },
            data: [0,201112067,1160271286,0,0,748962337,0,2289905587,211355292,0,0,64669389,559747,0,368939264,954704437,385646325,453112460,251406236,131414580,312915384,153890742]
        }]
    });

Answer 1

没有完美的解决方案，只有两个解决方法:

• 为 xAxis 设置 min 和 startOnTick，演示:http://jsfiddle.net/H3Asy/6/

      yAxis: {
          min: -1024 * 1024 * 1024,
          startOnTick: false,
      }
  

• 为 xAxis 设置系列阈值和 startOnTick，演示:http://jsfiddle.net/H3Asy/7/

      yAxis: {
          startOnTick: false
      },
      plotOptions: {
          areaspline: {
              threshold: -1
          }
      }