MultiBar Graph NVD3、d3.js 之上的折线图

Question

NVD3 有 multi bar chart 和 line plus bar chart。但似乎没有像多条加折线图这样的东西。

我有点玩折线加条形图，使其成为多条折线图。

下面是线加条形图接受数据的格式：

[
  {
    "key" : "Quantity",
    "bar": true,
    "values" : [[1136005200000, 127], [1138683600000, 271]]
  },
  {
    "key" : "Price",
    "values" : [[1136005200000, 71.89], [1138683600000, 75.51]]
  }
]

所以要在其中添加多个条，我尝试将数据更改为：

[
  {
    "key" : "Quantity",
    "bar": true,
    "values" : [[1136005200000, 127], [1138683600000, 271]]
  },
    {
    "key" : "Quantity1",
    "bar": true,
    "values" : [[1136005200000, 127], [1138683600000, 271]]
  },
  {
    "key" : "Price",
    "values" : [[1136005200000, 71.89], [1138683600000, 75.51]]
  }
]

这会在顶部显示两个标签 Quantity 和 Quantity1，但条形的总数仍然是两个（每个一个而不是每个两个）。

因为我得到了顶部的标签，我觉得这是可行的:)

这里是fiddle。

解释问题陈述：假设有一家书店，里面有各种书籍。我想将一个月内一天内售出的最大和最小图书数量显示为条形图，并将该月的总销售额显示为折线图。所以对于x轴上的每个月，应该有两个条和一个点（用于折线图）。

Answer 1

对于其他想知道的人来说，这个问题的真正答案是在 nv.models.multiChart 中将stacked 设置为true，或者基于nv.models.multiChart 创建另一个模型。

    bars1 = nv.models.multiBar().stacked(true).yScale(yScale1),
    bars2 = nv.models.multiBar().stacked(true).yScale(yScale2)

源代码中的行号：

https://github.com/novus/nvd3/blob/master/src/models/multiChart.js#L34

我正在像这样传递数据：

data.push({
                    type: "bar",
                    key: series.name,
                    values: seriesData,
                    yAxis: 1
                }
            )

Answer 2

查看 nvd3 包示例中的 multiChart.html 示例。此示例使用 multiChart 类型，每个 x 点显示 2 个线点、2 个区域点和 3 个条形，因此它也可以只显示 2 个条形和 1 个线点。