在 Rickshaw.js 中设置 Y 轴网格密度答案

【问题标题】：Set Y-axis grid density in Rickshaw.js在 Rickshaw.js 中设置 Y 轴网格密度
【发布时间】：2014-01-15 16:20:31
【问题描述】：

我有一个详细说明风速的图表，我希望 Y 轴上的网格每 5 (m/s) 有一个刻度。 如何设置 Y 轴网格的密度？

// triggered when data has been loaded via ajax
$graph.on('graph.render', function(e, d) {
    var graph, y_axis;

    // Fixtures
    palette = new Rickshaw.Color.Palette();

    graph = new Rickshaw.Graph( {
        element: $graph.find('.chart');
        width: $graph.innerWidth() - 20,
        height: $graph.innerHeight() - 20,
        series: [
            {
                key: 'min',
                name: 'Min Wind Speed',
                color: palette.color(),
                data: d[0].data
            } // ...
        ]
    });

    x_axis = new Rickshaw.Graph.Axis.Time({
        graph: graph,
        timeUnit: {
            seconds: 600,
            formatter: function(d) {
                return d.toUTCString().match(/(\d+:\d+):/)[1];
            }
        }
    });

    y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        element: $graph.find('.y-axis')
    });
});

【问题讨论】：

标签： javascript rickshaw

【解决方案1】：

您可以通过ticks 设置刻度数或通过tickValues 显式设置要显示的值：

var yAxis = new Rickshaw.Graph.Axis.Y( {
  graph: graph,
  tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
  //ticks: 5, //static number of ticks, only works 
  tickValues: [50,100,150,200,250,300,350], // values to use/display
  element: document.getElementById('y_axis')
} );

您可以使用ticks 或tickValues，不能同时使用。如果您如上所述使用tickValues 并且您的最大y 值为180，则y 比例将仅显示值[50,100,150,200]，250 及以上将不会显示。如果您添加更多具有更高 y 值的数据，比例尺将自动重新缩放并显示您指定的更高值。

有关ticks 和tickValues 的更多信息，请访问D3's SVG axes 页面。

【讨论】：