Question

使用d3绘图库人力车时，图表上会设置渲染器（区域，线条或条形图）。反正有没有一个包含多个系列的图表，其中一个系列被绘制为一条线而另一个系列被绘制为条形？

Answer 1

我尝试了相同的用例。

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

Answer 2

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

渲染器类型称为“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 }
            ]
        },
    ]
});

此处的完整示例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

在人力车中组合多个图表有一个pull request。显然这种方法仍需要一些改进，但代码似乎大部分都有效。

目前，您可以克隆feature branch，看看它是否符合您的目的。

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

4 个答案: