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

Question

Does anyone have any examples of using Highchart to achieve a result like the one in the image?

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                                       
    });

}

My code above can achieve stacked chart but I dont know how to put cumulative lines to the chart.

Answer 1

To get line type series with stacked column series you should set type of type per series for ones with other type than the one defined in chart.type option.

Example: 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]
        }]
    });
});