igDataChart クリックされた凡例に対応するシリーズの表示/非表示を切り替える

igDataChart において、凡例に表示されているシリーズをクリックした際に、そのシリーズを非表示にする方法です。

凡例(ChartLegend)上のクリックされた要素から対応するシリーズを特定し、シリーズのブラシ色に透明を割り当てます。

// 凡例要素をクリックした際のイベント
 $(document).delegate(".ui-chart-legend-item", "click", function(evt) {
    //  クリックされた凡例のテキスト（シリーズ名）を取得する。
    var seriesName = $(evt.currentTarget).find("span").text();
    toggleSeriesVisibility(seriesName);
 });

// シリーズの表示/非表示を切り替える処理
// 参照：https://jp.igniteui.com/data-chart/chart-elements
function toggleSeriesVisibility(seriesName) {
    // クリック対象のシリーズを特定する。
    var target = $("#lineChart").igDataChart("option", "series").find(item => item.name === seriesName + "series");
    // シリーズのブラシに透明職を適用する。
    $("#lineChart").igDataChart("option", "series", [
        {
            name: target.name,
            brush: target.brush ? null: "transparent"
        }]);
    // チャートの更新を行う。
    $("#lineChart").igDataChart("styleUpdated");
}