Блог

Не совсем уверен, что происходит с моим кодом, но у меня возникли проблемы с удалением всех рядов в highcharts после детализации. Когда я вызываю функцию resetChart, она удаляет только 2 из 4 серий, я настраиваю временное оповещение, чтобы сообщить дисплею, что он удаляет, и оно предупреждает только для 2 серий.

Однако, когда я удаляю строку chart.series[i].remove(); , срабатывают все 4 предупреждения. Я пробовал несколько способов зацикливания массива, даже ставил его в обратном порядке, но это не имеет никакого значения.

если вы скопируете приведенный ниже код в jsfiddle, вы поймете, что я имею в виду

HTML

 <div id="container" style="height: 400px; min-width: 600px"></div>
<script type="text/javascript" src="http://www.highcharts.com/js/testing-stock.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/samples/data/usdeur.js"></script>
  

jQuery

 $(function() {
var chart;

var colors = Highcharts.getOptions().colors,
    categories = ['October', 'November'],
    name = 'Monthly',
    data = [{
        y: 22,
        drilldown:[{
            name: 'Income',
            data: [12, 0],
            categories: ['Income', 'Expenses']
        }, {
            name: 'Expenses',
            data: [0, 5]
        }, {
            name: 'Employee',
            data: [0, 3]
        }, {
            name: 'Tax Office',
            data: [0, 1]
        }]
    }, {
        y: 21
    }];
function setChart(drilldown) {
    $.each(chart.series, function(i, val) {
        val.remove();
    });
    if(drilldown) {
        chart.xAxis[0].setCategories(drilldown[0].categories);
        $.each(drilldown, function(i, val) {
            chart.addSeries({
                 name: val.name,
                 data: val.data
            }, false);
        });
    }

    chart.redraw();
}
function resetChart() {
    //chart.toolbar.remove('RESET');
    $.each(chart.series.reverse(), function(i) {
        alert('removing :'   chart.series[i].name);

        // IF I REMOVE THE BELOW LINE, ALL ALERTS DISPLAY CORRECTLY
        chart.series[i].remove();
    });

     chart.xAxis[0].setCategories(categories);
     chart.addSeries({
          name: name,
          data: data
     });
     chart.redraw();
}

chart = new Highcharts.Chart({
    chart: {
        spacingLeft: 5,
        spacingRight: 5,
        spacingBottom: 5,
        renderTo: 'container',
        type: 'column'
    },
    title: false,
    xAxis: {
        categories: categories
    },
    yAxis: {
        title: false,
        labels: {
            formatter: function() {
                str = '$'   this.value   '';
                return str.replace('$-', '-$');
            }
        },
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        column: {
            cursor: 'pointer',
            stacking: 'normal',
            point: {
                events: {
                    click: function () {
                        var drilldown = this.drilldown;
                        if (drilldown) { // drill down;
                            setChart(drilldown);
                        }
                    }
                }
            }
        }
    },
    tooltip: {
        formatter: function() {
           var point = this.point,
              s = '<b>$'   this.y  '</b>';
              s = s.replace('$-', '-$');
           if (point.drilldown) {
              s  = ': Click to view '  point.category  '';
           }
           return s;
         }
    },
    series: [{
        name: name,
        data: data
    }]
});
chart.toolbar.add('RESET', 'Reset', 'chartReset', resetChart);
});
  

ИСПРАВЛЕНО

Вместо использования каждого я использовал while. Когда серия была удалена, она удаляла ее из массива, поэтому массив становился меньше

каждый раз вызывалась функция remove().

Заменил оба экземпляра каждого (в setChart и resetChart):

 $.each(chart.series.reverse(), function(i) {
    chart.series[i].remove();
});
  

С:

  while(chart.series.length > 0)
 chart.series[0].remove();