如何使用 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

要获得带有堆叠column 系列的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]
        }]
    });
});