Question

当隐藏了用该轴显示的系列中的所有数据的可见性时，我不知道如何从图表中隐藏轴标签。轴显示没有任何问题，但是当两个系列（在我的代码下面）隐藏特定轴时，轴保持可见，标签以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>

Answer 1

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

更新： danvk在评论中指出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 =（$（＆＃34;＃0：checked＆＃34;）。length + $（＆＃34;＃1：checked＆＃34;）。length）＆gt; 0; var y2vis =（$（＆＃34;＃2：checked＆＃34;）。length + $（＆＃34;＃3：checked＆＃34;）。length）＆gt; 0; if（y1vis＆amp;＆amp; y2vis）{ $（＆＃34; .dygraph轴标签-Y＆＃34）。显示（）; } else { $（＆＃34; .dygraph轴标签-Y＆＃34）。每一（功能（）{ // var IsY1 = $（this）.parent（）。css（＆＃34; text-align＆＃34;）==＆＃34; right＆＃34 ;; //改用y2类 var IsY1 =！$（this）.hasClass（＆＃34; dygraph-axis-label-y2＆＃34;）; if（IsY1＆amp;＆amp;！y1vis）{ $（本）.hide（）; } if（！IsY1＆amp;＆amp;！y2vis）{ $（本）.hide（）; } }）; } }

<强> DEMO

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

1 个答案: