Question

我们的设计师要求我们的堆积区域图表被渲染，使得绘图线消耗100％的可用图表宽度，而不是在第一个/最后一个刻度线处开始/停止。这是我们的设计师提供的模型，说明了我们正在努力实现的目标：

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

目前图表呈现如下，注意图线不消耗图表的宽度：

$(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的最小和最大属性，因此我更新了上述内容以反映这一点。然而，这会截断图表数据，因为它排除了第一个和最后一个数据点，所以为了解决这个问题，我正在将类别和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);
}

然后将xAxis上的最小值/最大值设置如下：

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

Answer 1

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

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

Answer 2

您可以在最小值和最大值中使用小数。

在你的情况下，最小0.5和最大6.5似乎可以解决问题： http://jsfiddle.net/jlbriggs/8pmVK/2/

min:0.5,
max:6.5,

使用整数将始终留空或截断。如果需要，可以通过调用getExtremes（），相应地调整min和max，以及调用setExtremes（）

来动态完成

Answer 3

我确信上面的项目已经完成，但是也可以使用Highstocks代替Highcharts（相同的许可证）并添加滚动条，如下所示：[http://jsfiddle.net/8pmVK/]。

        scrollbar: {
            enabled: true
        },

此外，Highstock包含Highcharts的所有功能。

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

3 个答案: