Question

以下是我fiddle的链接。

$(function () {
var chartConfig = {
    title: {
        text: '',
        style: 'display:none'
    },
    chart: {
        renderTo: 'container',
        type: 'area'
    },
    showAxes: false,
    xAxis: {
        labels: {
            enabled: true
        },
        tickLength: 0,
        lineWidth: 0,
        minorGridLineWidth: 0,
        gridLineWidth: 0,
        max: 275
    },
    yAxis: {
        labels: {
            enabled: true
        },
        title: {
            enabled: false
        },
        gridLineWidth: 0,
        minorGridLineWidth: 0,
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }],
        max: 200
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false
            }
        },
        column: {
            stacking: 'normal'
        },
        area: {
            pointStart: 20,
            lineColor: '#E8D0D0',
            lineWidth: 1,
            marker: {
                enabled: false,
                symbol: 'circle',
                radius: 2,
                lineWidth: 1,
                lineColor: '#666666'
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0,
        enabled: false
    }
};
var series = [{
    data: [[85, 0], [155, 220]],
    lineColor: "#E8D0D0",
    fillColor: "#E8D0D0",
    showLegend: false
}, {
    data: [[115, 0], [215, 220]],
    lineColor: "#D1A1A1",
    showLegend: false,
    fillColor: "#D1A1A1"
}, {
    data: [[145, 0], [265, 220]],
    showLegend: false,
    lineColor: "#BB8977",
    fillColor: "#BB8977"
}];
  chartConfig.series = series;
  var hChart = new Highcharts.Chart(chartConfig);
});

正如您所看到的，我有一系列数据在最大范围之后结束，导致每个数据系列之间出现空白。

实际上我希望图表接近这样的结果 - http://imgur.com/qyPpe6G

如何在此图表上使用“堆叠”模式？

感谢。

Answer 1

如果需要堆叠，则应该具有常见的x值，如示例

中所示

http://jsfiddle.net/DXHDT/

所以在你的情况下，它可能是这样的：

 var series = [{
    data: [[85, 0], [155, 220],[265, 220]],
    lineColor: "#E8D0D0",
    fillColor: "#E8D0D0",
    showLegend: false
}, {
    data: [[115, 0], [215, 220],[265, 220]],
    lineColor: "#D1A1A1",
    showLegend: false,
    fillColor: "#D1A1A1"
}, {
    data: [[145, 0], [265, 220]],
    showLegend: false,
    lineColor: "#BB8977",
    fillColor: "#BB8977"
}];

http://jsfiddle.net/43xEW/3/

fillColor堆积在面积图中

1 个答案: