Highcharts - 实时区域图表未正确堆叠

Question

我创建了一个实时更新的区域图表。

除了堆叠使用堆叠类型＆＃34;正常＆＃34; - 我必须使用＆＃34;％＆＃34;为了让它看起来正确。

对于图表看起来正常堆叠，您对我应该做些什么有什么建议吗？

我希望它在这个例子中看起来像：

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-stacking-area/

使用＆＃34;普通＆＃34;

时，堆叠看起来像这样

HTML：

<div class="row">
        <article id="chartContainer" class="card"></article>
</div>

的javascript：

    var colors = ['#591FCE', '#0C9CEE', '#3DBDC2', '#A1F480'];
    var stackedChart;

    function mockData() {
        var mockArray = [];

        for (var i = 0; i < 4; i++) {
            mockArray.push({
                value: getRandomInt(5000000, 50000000),
                tValue: getCurrentTime(),
                application: 'app' + getRandomInt(1, 10)
            })
        }
        return mockArray
    }


    function bytesToBit(bytes) {
        var bits;
        bits = bytes * 8;
        return bits;
    }


function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    }

    function convertEPOCH(epoch) {
        var myDate = new Date(epoch),
            convertedDate = myDate.toLocaleString();
        return convertedDate;
    }

    function getCurrentTime() {
        var currentTime = new Date().getTime();
        return currentTime;
    }

    function getStartTime() {
        var startTime = getCurrentTime() - 10800000;
        return startTime;
    }

    function createChart() {
        var created = false,
            currenttValue = 0,
            shiftCounter = 0,
            shift = false,
            colorCounter = -1,
            latestInsertedTime = 0,
            dataToApply,
            createCounter = -1,
            updateCounter = -1;

        setInterval(function() {
            if (shiftCounter > 8) {
                shift = true;
            }


            dataToApply = mockData();

            //Initiating the chart
            if (!created) {
                _.each(dataToApply, function(val) {
                    createCounter++;
                    colorCounter++;
                    latestInsertedTime = val.tValue - 5000;

                    stackedChart.addSeries({
                        name: val.application,
                        color: colors[colorCounter]
                    });
                    stackedChart.series[createCounter].addPoint([convertEPOCH(val.tValue), bytesToBit(val.value)], true, shift);
                });
                stackedChart.redraw();

                shiftCounter++;
                created = true;
            }
            //Updating when created
            if (created) {
                _.each(dataToApply, function(val) {
                    updateCounter++;

                    stackedChart.series[updateCounter].addPoint([convertEPOCH(val.tValue), bytesToBit(val.value)], true, shift);
                    latestInsertedTime = val.tValue - 5000;


                });
                stackedChart.redraw();
                shiftCounter++;
            }
            //Resetting temporary arrays and values
            createCounter = -1;
            updateCounter = -1;
        }, 2000);
    }

    //Creating Highchart chart
    stackedChart = new Highcharts.chart({
        chart: {
            type: 'area',
            renderTo: 'chartContainer',
            events: {
                load: createChart,
            },
            style: {
                fontFamily: 'Montserrat',
            }
        },
        title: {
            text: 'CDN distribution'
        },
        subtitle: {
            text: 'Updated every 5 minutes'
        },
        xAxis: {
            tickPixelInterval: 50,
            categories: [],
            labels: {
                rotation: -45
            }
        },
        yAxis: {
            title: {
                text: 'Percent'
            },
            tickmarkPlacement: 'on',
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        legend: {
            enabled: true
        },
        exporting: {
            enabled: false
        },
        plotOptions: {
            area: {
                stacking: 'normal',
                // stacking: 'percent',
                lineColor: '#666666',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#666666'
                }
            }
        },
        series: []
    });