Dygraph - 不显示数据时隐藏轴标签答案

【问题标题】：Dygraph - hide axis labels when not showing dataDygraph - 不显示数据时隐藏轴标签
【发布时间】：2014-04-29 21:30:33
【问题描述】：

当与该轴一起显示的系列中的所有数据的可见性都被隐藏时，我不知道如何从图表中隐藏轴的标签。轴显示没有任何问题，但是当隐藏特定轴的两个系列（在我的代码下方）时，轴仍然可见，并且标签以 1/10 的增量从 0 变为 1。我将不胜感激任何建议。以下是我正在使用的代码：

<head>
<script type="text/javascript" src="dygraph-combined.js"></script>
</head>
<body>
<p>The lines should maintain their colors as their visibility is toggled.</p>
<div id="blah"></div>
<p><b>Display: </b>
<input type=checkbox id=0 onClick="change(this)" checked>
<label for="0"> UX</label>
<input type=checkbox id=1 onClick="change(this)"><!-- got rid of checked -->
<label for="1"> EX</label>
<input type=checkbox id=2 onClick="change(this)" checked>
<label for="2"> JX</label>
<input type=checkbox id=3 onClick="change(this)" checked>
<label for="2"> EJ</label>
</p>

<script type="text/javascript">
  chart = new Dygraph(document.getElementById("blah"),
                    "date,UX,EX,JX,EJ\n" +
                    "10,3.0,4.15,133.1,140.1\n" +
        "11,3.3,4.18,100.9,135.3\n" +
                    "12,3.25,4.20,115.9,145.5\n" + 
        "13,3.35,4.16,98.9,106.8\n", 
                      {
        width: 640,
        height: 480,
        labelsSeparateLines: false,
        hideOverlayOnMouseOut: true,
        axisLabelFontSize: 9,
        colors: ['#284785', '#EE1111', '#8AE234', '#00ffff'],   
  series : {
 'UX' : {
  axis : 'y1',
  },
'EX' : {
  axis : 'y1',
  },
  'EJ' : {
  axis : 'y2',
  },
  'JX' : {
  axis : 'y2',
  }
  },
  visibility: [true, false, true, true],
showRangeSelector: true,
rangeSelectorHeight: 30,
labelsDivStyles: { 'textAlign': 'right' },
    title: 'Currency Pair Correlation',
    ylabel: 'Price',
connectSeparatedPoints: true,
strokeWidth: 3,
strokeBorderWidth: 1,
strokeBorderColor: '#000',
drawPoints : true,
    pointSize : 3,
    highlightCircleSize: 10,
drawPointCallback : Dygraph.Circles.HEXAGON,
    drawHighlightPointCallback : Dygraph.Circles.HEXAGON,
   });
  function change(el) {
    chart.setVisibility(el.id, el.checked);
  }
</script>
</body>

【问题讨论】：

标签： dygraphs

【解决方案1】：

我不知道如何通过 dygraphs API 做到这一点，但这是一种方法。在您的更改事件处理程序中，检查隐藏了哪些系列并确定可以隐藏哪些轴。然后找到所有带有 dygraph-axis-label-y 类的文本并遍历它们。 ~~如果它们的父 DIV 右对齐，则为 Y1 标签，如果左对齐，则为 Y2 标签。~~

更新： danvk 在 cmets 中指出 y2 标签具有 dygraph-axis-label-y2 类，因此我正在更新我的答案以使用这一事实。

function change(el) {
  chart.setVisibility(el.id, el.checked);
  var y1vis = ($("#0:checked").length + $("#1:checked").length) > 0;
  var y2vis = ($("#2:checked").length + $("#3:checked").length) > 0;      
  if (y1vis){
      $(".dygraph-axis-label-y:not(.dygraph-axis-label-y2)").show();
  } else {
      $(".dygraph-axis-label-y:not(.dygraph-axis-label-y2)").hide();
  }
  if (y2vis){
      $(".dygraph-axis-label-y2").show();
  } else {
      $(".dygraph-axis-label-y2").hide();
  }          
}

功能变化（el）{ chart.setVisibility(el.id, el.checked); var y1vis = ($("#0:checked").length + $("#1:checked").length) > 0; var y2vis = ($("#2:checked").length + $("#3:checked").length) > 0; 如果（y1vis && y2vis）{ $(".dygraph-axis-label-y").show(); } 别的 { $(".dygraph-axis-label-y").each(function(){ //var IsY1 = $(this).parent().css("text-align") == "right"; // 改用 y2 类 var IsY1 = !$(this).hasClass("dygraph-axis-label-y2"); if (IsY1 && !y1vis){ $(this).hide(); } if (!IsY1 && !y2vis){ $(this).hide(); } }); } }

DEMO

【讨论】：

检测辅助 y 轴标签的更好方法是通过“dygraph-axis-label-y2”类的存在。主 y 轴标签没有这个。
@danvk，好收获！我已更新我的答案以使用 y2 类。