javascript - 在人力车图中显示 X 和 Y 轴

Question

我有多个数据及其计数。我想使用人力车条形图显示它。我如何分别在 X 和 Y 轴上显示数据和计数。我得到的是：

var graph = new Rickshaw.Graph({
    element: document.querySelector("#chart"),
    renderer: 'bar',
    series: [{
        data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 12 }, { x: 3, y: 81 }, { x: 4, y: 40 }, { x: 5, y: 49 }, { x: 6, y: 12 },{ x:7, y: 12 }],
        color: 'steelblue'
    }]
});

graph.render();

显示没有 X 和 Y 轴的条形图。我们如何在条形图中显示 X 和 Y 轴？

Answer 1

来自ShutterStock 上的人力车页面：

var xAxis = new Rickshaw.Graph.Axis.Time({
    graph: graph
});

xAxis.render();

var yAxis = new Rickshaw.Graph.Axis.Y({
    graph: graph
});

yAxis.render();

Answer 2

有关如何使用 x 和 y 轴绘制图形的深入截屏视频，包括使用 Rickshaw（在 AngularJS 中）进行缩放和平移，请访问： http: //tagtree.io/d3-with-rickshaw-and-angular