하이 차트 차트에서 모든 계열 데이터를 제거하는 올바른 방법은 무엇입니까?

하이 차트 차트에서 모든 계열 데이터를 제거하는 올바른 방법은 무엇입니까?

---

업데이트 : 다음은 문제를 보여주는 jsfiddle입니다. http://jsfiddle.net/pynju/1/

월요일에 파란색 열을 클릭하십시오. 상세 뷰가로드되면 01-07에 3 개의 열이 있습니다 (예상 2). 원래보기로 돌아가려면 가장 높은 막대를 클릭하십시오. xAxis의 레이블이 제거되지 않습니다.

===============

2 개의 시리즈가있는 막대 차트가 있으며, 막대 쌍으로 나란히 표시됩니다.

series: [{
         showInLegend: false,
         data: dowChartData
      },{
         showInLegend: false,
         data: avgUserDowChartData
      }],

.

dowChartData = [                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   {
                y: 98.74,
                color: '#0072ff',
                drilldown: {
                   name: 'Category Engagement - Sunday',
                   categories: ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
                   data: [0,637,0,0,0,173,48.54,48.54,0,0,0,0,0,0,102.24,166.36,706.59,699.18,298.32,184.14,97.08,1539,0,1224.56],
                   color: '#0072ff',
                   data2: [506.80686467275,354.56354558498,333.25158689567,234.19283190879,234.82132336088,220.03247578171,222.86420797556,218.14034615202,170.42559544164,171.54776353196,249.24788461442,345.14915669555,206.65543589797,243.38811965637,367.02593304906,378.83677778129,467.45739743621,424.26264387522,639.60922934374,679.71299714907,373.26353846375,480.94380626458,551.82326068362,466.77469230724],
                   color2: '#C00'
                }
             }
AND SIMILAR

.

avgUserDowChartData = [                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         {
                y: 142.35,
                color: '#C00'
             },
AND SIMILAR

초기 데이터는 X 축이있는 요일 데이터입니다. 일요일-월요일-화요일-수요일-목요일-금요일-토요일

초기 시리즈에는 새 데이터 및 데이터 2가 포함 된 드릴 다운 요소가 있습니다 (위 참조).

드릴 다운 데모 코드를 예로 들어 다음 코드가 있습니다.

column: {
              borderWidth: 0,
            cursor: 'pointer',
            point: {
               events: {
                  click: function(event) {
                     var drilldown = this.drilldown;
                     if (drilldown) { // drill down
                        setChart(dowChart, drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.data2, drilldown.color2);
                     } else { // restore
                        setChart(dowChart, '', dowCategories, dowChartData);
                     }
                  }
               }
            },

차트 핸들러 설정 :

function setChart(chart, name, categories, data, color, data2, color2) {
      chart.xAxis[0].setCategories(categories);
//      chart.series[0].remove();
      for (var i = 0; i < chart.series.length; i++) {
          chart.series[i].remove();
      }
      chart.addSeries({
         showInLegend: false,
         name: name,
         data: data,
         color: color || 'white'
      });
      if (typeof(data2) != undefined && data2.length > 0) {
          chart.addSeries({
             showInLegend: false,
             name: name,
             data: data2,
             color: color2 || 'white'
          });
      }
   }

초기 차트는 완벽하게 표시됩니다.

파란색 막대 (드릴 다운이있는 데이터 세트)를 클릭하면 처음 7 개의 x 축 항목이 불안정 해집니다.

초기 데이터 세트가 코드에 의해 제거되지 않는 것과 같습니다.

for (var i = 0; i < chart.series.length; i++) {
          chart.series[i].remove();
      }

원래 데이터 세트 / 시리즈로 재설정하려는 의도로 막대를 클릭하면 :

그래서 ... 내가 사용하는 시리즈 제거 코드가 작동하지 않는 것이 분명합니다. 클릭 한 항목에 따라 매번 표시해야하는 차트와 2 개의 시리즈에서 데이터를 완전히 제거하는 가장 좋은 방법은 무엇입니까?

---

모든 차트 시리즈를 제거하려면 이것을 시도하십시오.

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

그것은 나를 위해 작동합니다. 코드

for (var i = 0; i < chart.series.length; i++)

호출 chart.series.length될 때마다 감소 하므로 작동하지 않습니다 remove(). 이렇게 i하면 예상 길이에 도달하지 않습니다. 도움이 되었기를 바랍니다.

---

The following way the chart will not redraw every iteration.
So you'll get a better performance.

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

chart.redraw();

---

Another way to remove all series in HighCharts with a for loop is to start from the end. Here's how to do it:

var seriesLength = chart.series.length;
for(var i = seriesLength - 1; i > -1; i--) {
    chart.series[i].remove();
}

I prefer to go this route because when using a HighStock chart, the navigator is usually the first series. I also prefer to keep a variable set to the navigator series. In that case, I'll do the following:

var seriesLength = chart.series.length;
var navigator;
for(var i = seriesLength - 1; i > -1; i--) {
    if(chart.series[i].name.toLowerCase() == 'navigator') {
        navigator = chart.series[i];
    } else {
        chart.series[i].remove();
    }
}

Now I can easily set the navigator series.

Here's an example of removing all series from a Highchart: http://jsfiddle.net/engemasa/srZU2/

Here's an example of resetting a HighStock chart with new data (including the navigator series): http://jsfiddle.net/engemasa/WcLQc/

---

The reason for (var i = 0; i < chart.series.length; i++) doesn't work is because you're modifying the array while you're looping over it. To get around this, you can iterate over the array from right to left, so when you remove an element, the index of the array will still point to the last item in the array.

Using lodash's forEachRight, you can do:

_.forEachRight(chart.series, chartSeries => {
  chartSeries.remove(false);
});

chart.redraw();

---

It may just be a simple matter of telling the chart to redraw. When you remove a series, try forcing the chart to redraw:

for (var i = 0; i < chart.series.length; i++) {
    chart.series[i].remove(true); //forces the chart to redraw
}

---

var seriesLength = chart.series.length; for(var i = seriesLength -1; i > -1; i--) { chart.series[i].remove(); }

---

You can also update and add a new series and if the new series is less than the current series then remove the series:

var hChart = $("#Chart").highcharts();

for (var i = 0; i < newSeries.length; i++) { //UPDATE-OLD/ADD-NEW SERIES
    if (hChart.series[i])
        hChart.series[i].update(newSeries[i]);
    else
        hChart.addSeries(newSeries[i]);
}

var serieslen = newSeries.length;
if (hChart.series[serieslen]) {
    var loopfrm = hChart.series.length - 1;
    for (var i = loopfrm; i >= serieslen; i--) {//REMOVE SERIES
        hChart.series[loopfrm].remove();
    }
}

---

I found the working solution. Try this:

for (var i = 0; i < chart.series.length; i++) {
   chart.series[0].remove();
}
chart.redraw();

It will completely remove all series.

참고URL : https://stackoverflow.com/questions/6604291/proper-way-to-remove-all-series-data-from-a-highcharts-chart