我有一个详细说明风速的图表,我希望 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')
});
});
最佳答案
您可以通过 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 找到页面。
关于javascript - 在 Rickshaw.js 中设置 Y 轴网格密度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21142676/