NVD3具有multi bar chartline plus bar chart。但似乎没有类似Multibar和Line 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]]
  }
]


这将在顶部显示两个标签,数量和数量1,但条形的总数仍为两个(每个条形一个,而不是每个条形两个)。

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

这是fiddle

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

最佳答案

对于其他任何人,这个问题的真正答案是在nv.models.multiChart中将stacking设置为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
                }
            )

关于javascript - MultiBar Graph NVD3,d3.js上方的折线图,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16456446/

10-13 01:05