How to set specific y-axis label points in dygraph

问题:

Dygraphs ordinarily automatically picks Y- (and X-) axis labeling points based on the size of your axes, the size of the labels, etc. In some cases, it picks labeling points that lead to less clarity. For instance, on a chart with Y-axis values from 0 to 10, it labels at 0, 4, and 8 (for a certain size chart, at least); I'd like it to label at 0, 5, and 10. Is there an option or function I can provide to Dygraphs to specify what points I'd like labeled and ticked?

回答1:

You can do this by writing your own y-axis ticker function: http://dygraphs.com/options.html#ticker

This is pretty advanced customization, so be wary and read the documentation in dygraph-tickers.js. Here's some rough code:

<script type="text/javascript">
  g = new Dygraph(div, data, {
    axes: {
      y: {
        ticker: function(min, max, pixels, opts, dygraph, vals) {
          return [{v:0, label:"0"}, {v:5, label:"5"}, {v:10, label:"10"}];
        }
      }
    }
  });
</script>

One downside of this approach is that these are the only y-axis tick marks you'll ever get, even if the user pans/zooms on the y-axis. Depending on your application, that may or may not be OK.

回答2:

If you just want to add a label to those that are auto-generated

g = new Dygraph(div, data, {
    axes: {
      y: {
        ticker: function(min, max, pixels, opts, dygraph, vals) {
          var your_value = 7.5;

          //Get auto-generated tickers (numericTicks is the default ticker generator)
          var tickers = Dygraph.numericTicks(min, max, pixels, opts, dygraph, vals);
          tickers.push({v: your_value, label: 'Custom Label'}); //Insert your label

          return tickers;
        }
      }
    }
  });