1

我们的设计师要求我们的堆积面积图被渲染成绘图线占用 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 属性，所以我更新了上面的内容以反映这一点。然而，这会截断图表数据，因为它排除了第一个和最后一个数据点，因此为了解决这个问题，我将虚拟值添加到类别和 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
}
4

3 回答 3

1

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

xAxys: {
 ...
 min: 1,
 max: 5
}
于 2013-03-22T15:37:32.487 回答
0

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

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

min:0.5,
max:6.5,

使用整数总是会留下空格或截断。如果需要，这可以通过调用 getExtremes()、相应地调整最小值和最大值以及调用 setExtremes() 来动态完成

于 2013-03-25T20:30:17.857 回答
0

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

        scrollbar: {
            enabled: true
        },

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

于 2015-05-26T21:23:38.893 回答