1

NVD3有多条形图和折线加条形图。但似乎没有像多条加折线图这样的东西。

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

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

[
  {
    "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，但条形的总数仍然是两个（每个一个而不是每个两个）。

由于我将标签放在顶部，所以我觉得这是可行的:)

这是小提琴。

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

4

2 回答 2

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
                }
            )
于 2014-05-15T18:33:33.420 回答
0

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

于 2013-05-11T18:50:32.843 回答