HighCharts：即时重新排序yAxis类别不会正确绘制

Question

I have a function that will allow me to add a series dynamically to my highchart. (I'm adding series's with their names as integer values and have them sorted in ascending order).

$('#addSeries').on('click', function() {
    //first check if value is already a series
    var seriesid = document.getElementById('txtValue').value;
    getSeriesIDIndex(seriesid, function(idindex) {
        //if it doesnt exist, add it to chart
        if (idindex == -1) {
            categories.push(parseInt(seriesid));
            categories = categories.sort(sortNumber);
            chart.yAxis[0].setCategories(categories, false);
            getCategoryIndex(parseInt(seriesid), function(cindex) {
                chart.addSeries({name: seriesid,  data: [{x: currentDate.getTime(), y: cindex}]}, false);

                for (i = 0; i < chart.series.length; i++) {
                    (function(i) {
                        getCategoryIndex(chart.series[i].name, function(cindex) {
                            for (y = 0; y < chart.series[i].data.length; y++) {
                                chart.series[i].data[y].y = cindex;
                                chart.redraw();
                            }
                        });
                    })(i);
                }

                chart.redraw();
            });
        }
    });

First add a series "123", then "44" and it will not display properly... but then add another series "555" and it gets redrawn properly. The category indeces for these would be 0 for 44, 1 for 123, and 2 for 555 (because I want to keep the series categories in ascending order). So it seems that when adding a series category of lesser value than the other categories, it won't redraw correctly

I've also created a jsfiddle: http://jsfiddle.net/5L59r1qt/17/

Answer 1

Please take a look at http://jsfiddle.net/qner9hwc/1/

             getCategoryIndex(parseInt(seriesid), function (cindex) {
                chart.addSeries({
                    name: seriesid,
                    data: [{
                        x: currentDate.getTime(),
                        y: cindex
                    }]
                }, false);
                for (i = 0; i < chart.series.length; i++) {
                    var cur_series = chart.series[i];
                    var cur_cindex;
                    getCategoryIndex(chart.series[i].name, function (cindex) {
                        cur_cindex = cindex;
                    });
                    for (var z = 0; z < cur_series.data.length; z++) {
                        if (cur_series.data[z].y >= cindex && cur_series.name !== seriesid) {
                            console.log('change!' + cur_series.data[z].y);
                            cur_series.data[z].y = cur_cindex;
                        }
                    }
                }
                console.log(chart.yAxis[0].categories);
                chart.redraw();
            });

The y values now get changed accordingly;

However the yaxis is a little bit too high right now. Maybe the others can figure out why that is the case. (look at the tooltip on state hover, the values are correct now)