I have a graph detailing wind speeds where I would like to have the grid on the Y axis have ticks every 5 (m/s). How do I set the density of the Y axis grid?
// 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')
});
});
You could set the number of ticks via ticks
or the values to display via tickValues
explicitly:
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')
} );
You would use either ticks
or tickValues
, not both. If you use tickValues
as above and your max y value is 180
, the y-scale would only show the values [50,100,150,200]
, 250
and above would not be shown. If you add more data with a higher y-value, the scale would automatically re-scale and show the higher values as specified by you.
More information about ticks
and tickValues
can be found at the D3's SVG axes page.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.