0

我的图表中有两个系列的数据（红色和蓝色一个），并试图通过单击复选框来隐藏它们。因此，当我单击复选框 1 或复选框 2 时，我希望能够看到一个数据系列（蓝色或红色）。

您可以在我的fiddle中看到我的数据系列。

这就是我用来隐藏它们的代码，但我收到了这个错误：“Uncaught TypeError: Cannot read property 'style' of undefined”

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

1

line1并且line2是您要显示/隐藏的 SVG 元素的 ID。它们不是类名。您需要按 ID 而不是类选择。

showOrHide = function (i) {
   var selectt = document.getElementsByClassName("messageCheckbox")[i].value;
   if (document.getElementsByClassName("messageCheckbox")[i].checked) {
     document.getElementById(selectt).style.display = 'none';
   } else {
     document.getElementById(selectt).style.display = 'block';
   }
}
于 2013-08-05T08:46:04.400 回答
0

更新标记 - 删除内联的“onclick”属性：

<div id="option">
    <input type="checkbox" checked="checked" class="messageCheckbox" value="chart1"/>1
    <input type="checkbox" value="chart2" checked="checked" class="messageCheckbox" />2
</div>

然后将每个图表元素分组到一个单独的<g>元素下：

var chart1 = svg.append('g').classed('chart1', true);
// add the area
chart1.append("path")
    ...
// Add the line 1
chart1.append("path")
    ...
// tooltip  
var blueCircles = chart1.selectAll("dot")

对第二张图表做同样的事情。这是为了使图表操作更容易。

最后，在代码中设置事件监听器：

d3.selectAll('.messageCheckbox').on('click', function () {
    var value = this.value,
        checked = this.checked;
    d3.select('.' + value).classed('hidden', !checked);
});

查看演示

于 2013-08-05T09:00:07.793 回答
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 回答