HighCharts列グラフから列全体を動的に削除する方法はありますか？

Question

これは、だから今、私はチャートから列を削除する必要があり、この

var chart = $("#container").highcharts(); 
chart.series[0].addPoint(["abc", 100]]); 

のような単純な縦棒グラフ

$("#container").highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Monthly Average Rainfall' 
    }, 
    subtitle: { 
     text: 'Source: WorldClimate.com' 
    }, 
    xAxis: { 
     categories: [ 
      'Jan', 
      'Feb', 
      'Mar', 
      'Apr', 
      'May', 
      'Jun', 
      'Jul', 
      'Aug', 
      'Sep', 
      'Oct', 
      'Nov', 
      'Dec' 
     ], 
     crosshair: true 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Rainfall (mm)' 
     } 
    }, 
    tooltip: { 
     headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
     pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
     footerFormat: '</table>', 
     shared: true, 
     useHTML: true 
    }, 
    plotOptions: { 
     column: { 
      pointPadding: 0.2, 
      borderWidth: 0 
     } 
    }, 
    series: [{ 
     name: 'Tokyo', 
     data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 

    }] 
}); 

私は動的に列（ポイント）を追加している場合の例です。名前でポイントを動的に追加しました。だから私が特定の追加シリーズ名を削除すると、その列をチャートから削除する必要があります。

新しい列（ポイント）を追加すると、名前に 'x'マークが付いたボタンが作成され、その 'x'マークをクリックするとその特定の列がグラフから削除されます。だから、私が持っているのはカテゴリ名なので、それを削除する必要があります。

したがって、グラフから列を動的に削除する必要があります。以来、それは単なる単一のシリーズです。カテゴリをそれぞれのデータ値で削除します。私はそれをどうやって行うのか分からない！

たとえば、上記のチャートでは、カテゴリから「Oct」を削除し、データ '194.1'からそれぞれの値を削除します。そして私はちょうどそのカテゴリーの値（'10月 '）を持っています。それは可能ですか？

私はカテゴリの値が 'Oct'であるため、削除する必要があるインデックスがわからないため、このchart.series [0] .data [9] .remove（） 。また、列全体ではなく、グラフからポイントを削除するだけです（それぞれのカテゴリの値を含めてグラフを再シフトします）。

どのように私はこれを行うことができます知っていますか？

Answer 1

データとカテゴリをフィルタリングしてグラフを更新する関数を作成できます。

例：

function removeCategoryAndData (chart, categoryName) { 
    const { categories } = chart.xAxis[0] 
    const categoryIndex = categories.indexOf(categoryName) 
    const { data } = chart.series[0] 

    // Filter data and categories 
    const filteredData = data.map((p) => p.y).filter((v, i) => i !== categoryIndex) 
    const filterdCategories = categories.filter((v, i) => i !== categoryIndex) 

    // Update chart with filtered data and categories 
    chart.update({ xAxis: { categories: filterdCategories }, series: { data: filteredData } }) 
} 

ライブ例： それは私にこのエラーが発生しますhttps://jsfiddle.net/yy9bhvq2/