Javascript 使用人力车混合条形图和线形图（基于d3的js图形库）

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

我尝试了相同的用例

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

---

nvd3支持。

我发现解决方案比解决方案更多，但它可能会有所帮助

您可以在两个人力车图形的顶部绘制两个人力车图形：

<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轴上获得精确匹配

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

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

有一个在人力车中组合多个图表的方法。显然，该方法还需要一些改进，但代码似乎基本上是有效的

---

目前，您可以克隆并查看是否符合您的目的。

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

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

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 }
            ]
        },
    ]
});

这里有完整的例子