Question

这是关于https://github.com/danvk/dygraphs/blob/master/tests/hairlines.html

我有一个问题，我想在图表上绘制最多2个细线。如何限制用户只绘制2行。

API是否支持？我在哪里可以获得详细信息？如果不支持，那我该怎么做？任何想法。

谢谢和问候。

Answer 1

您可以使用hairlineCreated事件来限制细线数量。例如，如果细线总数超过两个，则以下代码段会删除以前添加的细线：

$(hairlines).on({
  'hairlineCreated': function() {
    var maxHairlines = 2;
    var h = hairlines.get();
    if (h.length > maxHairlines) {
      h.splice(0, h.length-maxHairlines);
      hairlines.set(h);
    }
  }
);

检查以下代码段以了解实施情况：

＆＃13;

var last_t = 0;
var data = [];
var fn = function(t) {
  return Math.sin(Math.PI / 180 * t * 4);
};
for (; last_t < 200; last_t++) {
  data.push([last_t, fn(last_t)]);
}

hairlines = new Dygraph.Plugins.Hairlines({
  divFiller: function(div, data) {
    // This behavior is identical to what you'd get if you didn't set
    // this option. It illustrates how to write a 'divFiller'.
    var html = Dygraph.Plugins.Legend.generateLegendHTML(
      data.dygraph, data.hairline.xval, data.points, 10);
    $('.hairline-legend', div).html(html);
    $(div).data({
      xval: data.hairline.xval
    }); // see .hover() below.
  }
});
g = new Dygraph(
  document.getElementById("demodiv"),
  data, {
    labelsDiv: document.getElementById('status'),
    labelsSeparateLines: true,
    legend: 'always',
    labels: ['Time', 'Value'],

    axes: {
      x: {
        valueFormatter: function(val) {
          return val.toFixed(2);
        }
      },
      y: {
        pixelsPerLabel: 50
      }
    },

    // Set the plug-ins in the options.
    plugins: [hairlines]
  }
);

var shouldUpdate = true;
var update = function() {
  if (!shouldUpdate) return;
  data.push([last_t, fn(last_t)]);
  last_t++;
  data.splice(0, 1);
  g.updateOptions({
    file: data
  });
};
window.setInterval(update, 1000);

// Select/Deselect hairlines on click.
$(document).on('click', '.hairline-info', function() {
  console.log('click');
  var xval = $(this).data('xval');
  var hs = hairlines.get();
  for (var i = 0; i < hs.length; i++) {
    if (hs[i].xval == xval) {
      hs[i].selected = !hs[i].selected;
    }
  }
  hairlines.set(hs);
});

// Demonstration of how to use various other event listeners


$(hairlines).on({
  'hairlineMoved': function(e, data) {
    // console.log('hairline moved from', data.oldXVal, ' to ', data.newXVal);
  },
  'hairlineCreated': function(e, data) {
    var maxHairlines = 2;
    h = hairlines.get();
    if (h.length > maxHairlines) {
      h.splice(0, h.length - maxHairlines);
      hairlines.set(h);
    }
  },
  'hairlineDeleted': function(e, data) {
    console.log('hairline deleted at ', data.xval);
  }
});

＆＃13;

#demodiv {
  position: absolute;
  left: 10px;
  right: 200px;
  height: 400px;
  display: inline-block;
}
#status {
  position: absolute;
  right: 10px;
  width: 180px;
  height: 400px;
  display: inline-block;
}
#controls {
  position: absolute;
  left: 10px;
  margin-top: 420px;
}
/* This style & the next show how you can customize the appearance of the
         hairlines */

.hairline-info {
  border: 1px solid black;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  display: table;
  /* shrink to fit */
  min-width: 100px;
  z-index: 10;
  /* should appear on top of the chart */
  padding: 3px;
  background: white;
  font-size: 14px;
  cursor: move;
}
.dygraph-hairline {
  /* border-right-style: dotted !important; */
  cursor: move;
}
.dygraph-hairline.selected div {
  left: 2px !important;
  width: 2px !important;
}
.hairline-info.selected {
  border: 2px solid black;
  padding: 2px;
}
.annotation-info {
  background: white;
  border-width: 1px;
  border-style: solid;
  padding: 4px;
  display: table;
  /* shrink to fit */
  box-shadow: 0 0 4px gray;
  cursor: move;
  min-width: 120px;
  /* prevents squishing at the right edge of the chart */
}
.annotation-info.editable {
  min-width: 180px;
  /* prevents squishing at the right edge of the chart */
}
.dygraph-annotation-line {
  box-shadow: 0 0 4px gray;
}

＆＃13;

<link href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://dygraphs.com/extras/hairlines.js"></script>

<h2>Hairlines Demo</h2>

<p>Click the chart to add a hairline. Drag the hairline to move it.</p>

<!--
    The "info box" for each hairline is based on this template.
    Customize it as you wish. The .hairline-legend element will be populated
    with data about the current points and the .hairline-kill-button element
    will remove the hairline when clicked. Everything else will be untouched.
    -->
<div id="hairline-template" class="hairline-info" style="display:none">
  <button class='hairline-kill-button'>Kill</button>
  <div class='hairline-legend'></div>
</div>

<div id="demodiv"></div>
<div id="status"></div>
</div>

＆＃13;

如何控制Dygraphs中的垂直线数？

1 个答案: