javascript - 如何使用 Highchart.js 创建带有累积线的堆积图

Question

有人有使用 Highchart 实现如图所示结果的示例吗？

function drawChart(result) {
    var response =
        {
            Month: result.Month,
            Data: result.Data,
            Title: result.title
        };
    $('#dvChart').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: title
        },

        xAxis: {
            categories: response.Month
        },
        yAxis: [{
            min: 0,
            title: {
                text: "# Of Tests"
            },

        }, 

        ],

        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                stacking: 'normal',

                }
            }
        }

        ,    
        series:                 
             response.Data                                       
    });

}

我上面的代码可以实现堆积图，但我不知道如何将累积线放入图表中。

Answer 1

要获得具有堆叠列系列的line类型系列，您应该为具有除chart.type选项中定义的类型之外的其他类型的系列设置每个系列的类型类型。

示例:http://jsfiddle.net/t3v579uj/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['r', 'e', 's', 'p', 'o']
        },
        yAxis: [{
            min: 0,
            title: {
                text: "# Of Tests"
            }
        }],
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0,
                stacking: 'normal'
            }
        },
        series: [{
            data: [1,2,3,4]
        },{
            data: [1,2,3,4]
        },{
            data: [1,2,3,4]
        },{
            type: 'line',
            data: [2,3,4,5]
        }]
    });
});