Dygraph - скрывать метки осей, когда данные не отображаются

Я не знаю, как скрыть метки оси от графика, когда видимость всех данных в серии, которая должна отображаться с этой осью, скрыта. Оси отображаются без каких-либо проблем, но когда две серии (ниже в моем коде) скрыты для конкретной оси, ось остается видимой, а метки меняются с 0 на 1 с шагом 1/10. Буду признателен за любые предложения. Ниже приведен код, который я использую:

<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
person geezer1    schedule 22.04.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не знаю, как это сделать через API dygraphs, но вот один из способов сделать это. В обработчике событий изменения проверьте, какие ряды скрыты, и определите, какие оси могут быть скрыты. Затем найдите весь текст с классом 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();
  }          
}
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 && y2vis){ $(".dygraph-axis-label-y").show(); } else { $(".dygraph-axis-label-y").each(function(){ //var IsY1 = $(this).parent().css("text-align") == "right"; // use y2 class instead var IsY1 = !$(this).hasClass("dygraph-axis-label-y2"); if (IsY1 && !y1vis){ $(this).hide(); } if (!IsY1 && !y2vis){ $(this).hide(); } }); } }

ДЕМО

person ezanker    schedule 25.04.2014
comment
Лучший способ обнаружить вторичную метку оси Y — это наличие класса dygraph-axis-label-y2. Метки основной оси Y не имеют этого. - person danvk; 29.04.2014
comment
@danvk, хороший улов! Я обновил свой ответ, чтобы использовать класс y2. - person ezanker; 29.04.2014