Chart.js - ロード後にラベル文字列を使用して行を隠す

Question

chart.jsを使用すると、.net Webアプリケーションでコンパイルされたデータセットを表示している折れ線グラフがあります。

ラベル名に基づいて、データが読み込まれると、行を非表示/無効に設定できますか？

chart.jsにはhidden flagがあり、データセットを読み込み時に隠すことができますが、これはデータセットを最初に定義するときに設定されます。ビュー内で既にデータが定義されているため、このフラグは使用できません。例えば。

var viewsByMonthChartCtx = new Chart(viewsByMonthChartCtx, { 
     type: 'line', 
     data: { 
      labels: ['February 2017','March 2017'], 
      datasets: 
       [ { label: 'Home', data: [100,120 ] }, // I want to set 'hidden: true' to the Home dataset post initialization 
        { label: 'Search', data: [200,240 ] } ] 
     }, 
     options: { 
      scales: { 
       yAxes: [{ 
        ticks: { 
         beginAtZero: true 
        } 
       }] 
      }, 
     } 
    }); 

Answer 1

あなたがチャートを初期化（およびレンダリング）された後のデータセットを非表示にしたい場合は、まだデータセットhidden: trueプロパティを使用します。チャートインスタンスからデータセットにアクセスし、プロパティをtrueに設定するだけで済みます。

ここでは、ページが読み込まれてから5秒後にラベルに一致するデータセットが非表示になっている例を示します。

// the dataset label we want to hide after chart is initialized 
var hiddenLabel = 'My Second Dataset'; 
var timerDuration = 5; 

// hide a dataset after X seconds 
setTimeout(function() { 
    var indexToHide = -1; 

    // find which dataset matches the label we want to hide 
    myLine.config.data.datasets.forEach(function(e, i) { 
    if (e.label === hiddenLabel) { 
     indexToHide = i; 
    } 
    }); 

    // get the dataset meta object so we can hide it 
    var meta = myLine.getDatasetMeta(indexToHide); 

    // hide the dataset and re-render the chart 
    meta.hidden = true; 
    myLine.update(); 
}, timerDuration * 1000); 

あなたが見ることができるように、あなただけの、あなたは単にtrueに隠されたプロパティを設定し、グラフを更新し、一致するラベルを持つデータセットのインデックスを見つけるために、データセットを反復処理することができます。

完全な実例を示すcodepenがあります。

これは、なぜチャートが隠された後にこれをしたいのかが分かりません。ページの読み込み時に非表示にしたいデータセットを既に知っている場合は、データとオプションのチャート設定を動的にアセンブルし、プログラムでhiddenフラグをtrueに設定するだけです。ここに例があります。

// the dataset label we want to hide 
var hiddenLabel = 'My Second Dataset'; 

// build our data and options config (if needed you could build the datasets dynamically from dynamic data (this example is static) 
var config = { 
    type: 'line', 
    data: { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [{ 
     label: "My First Dataset", 
     backgroundColor: chartColors.red, 
     borderColor: chartColors.red, 
     data: [5, 10, 25, 15, 10, 20, 30], 
     fill: false, 
    }, { 
     label: "My Second Dataset", 
     fill: false, 
     backgroundColor: chartColors.blue, 
     borderColor: chartColors.blue, 
     data: [5, 0, 12, 5, 25, 35, 15], 
    }] 
    }, 
    options: { 
    responsive: true, 
    title: { 
     display: true, 
     text: 'Chart.js Hide Dataset Matching "My Seconds Dataset" After 3 Seconds' 
    }, 
    tooltips: { 
     mode: 'index', 
     intersect: false, 
    }, 
    hover: { 
     mode: 'nearest', 
     intersect: true 
    }, 
    scales: { 
     xAxes: [{ 
     display: true, 
     scaleLabel: { 
      display: true, 
      labelString: 'Month' 
     } 
     }], 
    } 
    } 
}; 

// iterate over our datasets to find the one we want to hide 
config.data.datasets.forEach(function(e) { 
    if (e.label === hiddenLabel) { 
    e.hidden = true; 
    } 
}); 

// instantiate the chart 
var myLine = new Chart($('#canvas'), config);