web-dev-qa-db-ja.com

ハイチャートからすべての系列データを削除する適切な方法は？

更新：問題を示す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'
          });
      }
   }

最初のチャートは完璧に表示されます： initial display

青いバー（ドリルダウンのあるデータセット）のいずれかをクリックすると、最初の7つのx軸アイテムが不安定になります。 drill down - broken display

これは、初期データセットがコードによって削除されていないかのようです。

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

元のデータセット/シリーズにリセットする目的でバーのいずれかをクリックすると： reset data to original set - broken display

だから...私が使用しているシリーズの削除コードが機能していないことは明らかです。クリックされたものに応じて、毎回表示する必要があるチャートと2シリーズのデータ​​を完全に削除する最良の方法は何ですか？

javascriptchartshighcharts
65
Z Jones

これを試して、すべてのチャートシリーズを削除します。

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

わたしにはできる。コード

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

remove()が呼び出されるたびに_chart.series.length_が減少するため、機能しません。そうすれば、iが期待される長さに達することはありません。お役に立てれば。

146
Lee

次の方法では、チャートは反復ごとに再描画されません。
したがって、パフォーマンスが向上します。

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

chart.redraw();
42
Ricardo Alvaro Lohmann

Forループを使用してHighChartsのすべてのシリーズを削除する別の方法は、最後から開始することです。方法は次のとおりです。

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

HighStockチャートを使用する場合、ナビゲーターは通常最初のシリーズであるため、このルートを使用することを好みます。また、ナビゲーターシリーズに設定された変数を保持することを好みます。その場合、次のことを行います。

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();
    }
}

これで、ナビゲーターシリーズを簡単に設定できます。

ハイチャートからすべてのシリーズを削除する例を次に示します。 http://jsfiddle.net/engemasa/srZU2/

以下は、新しいデータ（ナビゲーターシリーズを含む）でHighStockチャートをリセットする例です。 http://jsfiddle.net/engemasa/WcLQc/

8
Scott

for (var i = 0; i < chart.series.length; i++)が機能しない理由は、ループ処理中に配列を変更しているためです。これを回避するには、配列を右から左に反復処理することができます。したがって、要素を削除しても、配列のインデックスは配列の最後のアイテムを指します。

Lodashの forEachRight を使用すると、次のことができます。

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

chart.redraw();
1
chipit24

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

0
YASH GAUTAMI

チャートに再描画するよう指示するだけの単純な問題かもしれません。シリーズを削除するときは、チャートを強制的に再描画してみてください。

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

新しいシリーズを更新して追加することもできます。新しいシリーズが現在のシリーズよりも小さい場合は、シリーズを削除します。

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();
    }
}
0
Rupesh Verma