无法删除highcharts中的所有“系列”

时间:2011-11-06 15:20:14

标签: jquery highcharts

我不确定我的代码是怎么回事,但是在我深入研究之后我在删除highcharts中的所有系列时遇到了问题。当我调用 resetChart 函数时,它只删除了4个系列中的2个,我设置了一个临时警报来告诉显示它的删除内容,它只警告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);
});

1 个答案:

答案 0 :(得分:10)

已修复

而不是使用我使用的每一个。 当系列被移除时,它将从阵列中移除它,因此阵列变小了

每次调用remove()。

替换了每个实例(在 setChart resetChart 中):

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

使用:

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