javascript - Highcharts - 强制绘图线消耗可用宽度？

Question

我们的设计师要求渲染堆积面积图，使绘图线占用 100% 的可用图表宽度，而不是在第一个/最后一个刻度线处开始/停止。这是我们的设计师提供的模型，它说明了我们想要实现的目标:

http://oi50.tinypic.com/25s2bzm.jpg

当前图表呈现如下，请注意绘图线不占用图表的宽度:

http://jsfiddle.net/8pmVK/

$(function () {
var chart;
$(document).ready(function() {
    Highcharts.setOptions({
        colors: ['#1FA5FF', '#9BD237', '#E6673B']
    });
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'area'
        },
        title: {
            text: null
        },
        exporting: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: ['Mar 2012', 'Apr 2012', 'May 2012', 'Jun 2012', 'Jul 2012', 'Aug 2012', 'Sep 2012'],
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: null
            }
        },
        plotOptions: {
            area: {
                fillOpacity: 0.3,
                stacking: 'normal',
                lineWidth: 3,
                marker: {
                    lineWidth: 3,
                    enabled: false
                }
            }
        },
        series: [{
            name: 'John',
            data: [30, 26, 18, 35, 30, 28, 40, 31]
        }, {
            name: 'Jane',
            data: [40, 35, 37, 33, 30, 42, 30, 26]
        }, {
            name: 'Bob',
            data: [26, 33, 28, 20, 35, 33, 35, 20]
        }]
    });
});

我浏览了 API 并进行了搜索，但我没有找到(或者可能错过了)我必须设置哪个选项来实现这一点(假设它甚至是可能的)。预先感谢您的帮助。

更新:解决方案是设置 xAxis 的 min 和 max 属性，因此我更新了上面的内容以反射(reflect)这一点。然而，这会 chop 图表数据，因为它排除了第一个和最后一个数据点，因此为了解决这个问题，我将虚拟值添加到categories和series.data数组中，并注意数据是我通过Ajax返回的对象构建图表:

data.categories.unshift('');
data.categories.push('');
for (var i = 0, len = data.series.length; i < len; i++) {
    data.series[i].data.unshift(0);
    data.series[i].data.push(0);
}

x 轴上的最小值/最大值设置如下:

xAxis: {
    min: 1,
    max: data.categories.length - 2 // 2nd to last index
}

Answer 1

您需要为您的 xAxis 找到正确的最小值/最大值。在您的示例中:

xAxys: {
 ...
 min: 1,
 max: 5
}