0

グラフに 2 つの一連のデータ (赤と青) があり、チェック ボックスをクリックしてそれらを非表示にしようとしています。チェックボックス1またはチェックボックス2をクリックしたときに、1つのデータシリーズ（青または赤）を表示できるようにしたい.

私のデータ系列は私のフィドルで見ることができます。

そして、それは私がそれらを非表示にするために使用したコードですが、次のエラーが表示されます:

HTML:

     <input type="checkbox" checked="checked" class="messageCheckbox" value="line1" onclick="showOrHide(0);" />1
     <input type="checkbox" value="line2" checked="checked" class="messageCheckbox" onclick="showOrHide(1);" />2

Javascript:

  showOrHide = function (i) {
    var selectt = document.getElementsByClassName("messageCheckbox")[i].value;
   if (document.getElementsByClassName("messageCheckbox")[i].checked) {
     document.getElementsByClassName(selectt)[0].style.display = 'none';
   } else {
     document.getElementsByClassName(selectt)[0].style.display = 'block';
 }
}

SVG要素を非表示にするためにこのコードも試しましたが、グラフ全体が非表示になりますが、青または赤のグラフを非表示にしたいです!

  showOrHide = function (i) {
  var selectt = document.getElementsByClassName("messageCheckbox")[i].value;
 if (document.getElementsByClassName("messageCheckbox")[i].checked) {
      svg.style("display", "none"); // or svg.attr("opacity", 0);
   } else {
     svg.style("display", "block");
   }

}

何をすべきか考えていますか？

前もって感謝します

4

3 に答える 3

0

データセットで「非表示」ブール値を使用できます。hidden が「false」の場合、データは表示されません。

>

  public lineChartData: Array<any> =  [
    {label: 'TestValue', unit: '°C', hidden: false, 
    data: [{ x: 1504280788000, y: 12 }, { x: 1504290788000, y: 14 }, { x: 1504300788000, y: 18 }, { x: 1504310788000, y: 21 }, { x: 1504320788000, y: 12 }, { x: 1504330788000, y: 15 }] },

于 2017-09-15T12:08:30.917 に答える