javascript - 使用 Rickshaw 混合条形图和折线图（基于 d3 的 js 图形库）

Question

使用 d3 绘图库 Rickshaw 时，在图形上设置渲染器（区域、线或条形图）。是否有一个包含多个系列的图表，其中一个系列绘制为一条线，另一个绘制为条形？

Answer 1

我尝试了相同的用例。

我修改了人力车源。但是我找到了这个。

nvd3 支持混合图。

Answer 2

您现在可以在人力车上组合图表！

渲染器类型称为“多”。它的工作原理是你给每个单独的系列它自己独特的渲染器，即

var graph = new Rickshaw.Graph({
    element: el, width: 960, height: 500,
    padding: { top: 0, right: 0, bottom: 0, left: 0 },
    renderer: 'multi',
    series: [
        {
            renderer: 'line',
            data: [
                { x: 0, y: 40 },
                { x: 1, y: 49 }
            ]
        },
        {
            renderer: 'bar',
            data: [
                { x: 0, y: 30 },
                { x: 1, y: 60 }
            ]
        },
    ]
});

完整示例在这里https://github.com/shutterstock/rickshaw/blob/a240899625c2d83961b3e682cd77ab8e5199a866/tests/Rickshaw.Graph.Renderer.Multi.js

Answer 3

我发现了比解决方案更多的解决方法，但无论如何它可能会有所帮助。

您可以在彼此之上绘制两个人力车图：

<div style="height: 0; overflow: visible;">
  <div id="barChart" style="height: 300px;"></div>
</div>

<div style="height: 0; overflow: visible;">
  <div id="lineChart" style="height: 300px;"></div>
</div>

现在绘制两个图表，并为每个图表 div 调用两次 Rickshaw.Graph()。请注意，您需要复制折线图中的最后一个点，否则您将无法在 x 轴上获得准确的匹配。

我知道这很难看，但它对简单的图表很有用。但是，我不知道如果您尝试使用悬停效果或类似效果会发生什么。

如果有一个干净的解决方案，我也会感兴趣。

Answer 4

在 Rickshaw 中有一个合并多个图表的拉取请求。显然，该方法仍需要一些改进，但代码似乎大部分都有效。

目前，您可以克隆功能分支，看看它是否符合您的目的。