在MultiBar图NVD3，d3.js顶部的线图 [英] Line Graph on top of MultiBar Graph NVD3, d3.js

问题描述

NVD3 有多栏图表和行加条形图。

我绕着线加上条形图，使它成为多条线折线图。

I sort of played around line plus bar chart to make it multi bar line chart.

以下是行加棒图接受数据的格式：

Here is the format in which line plus bar graph accepts data:

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

所以要添加多个条，我试图将数据更改为：

So to add multiple bars in this, i tried changing the data to:

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

This shows both labels, Quantity and Quantity1 at the top but to total no of bars is still two(one for each instead of two for each).

由于我的标签在顶部，我不知怎的感觉这是可行的）

Since I am getting the labels at the top, I somehow feel that this is doable :)

这里是小提琴。

解释问题陈述：各种书。我想显示在一个月内作为酒吧和总销售在一个月的期间销售的书的最大和最小值作为线图。因此，对于x轴上的每个月，应该有两个小节和一个点（对于线图）。

Explaining the problem statement: Lets say there is a book store with various books. I want to show the max and min no of book sold in a day over a period of one month as bars and total sale in that month as line graph. So for every month on x axis, there should be two bars and one point(for line graph).

推荐答案

这个问题对任何人想知道要么在nv.models.multiChart中设置堆叠为true或基于nv.models.multiChart创建另一个模型。

The real answer to this question for anyone else wondering is to either set stacked to true in nv.models.multiChart or create another model based on nv.models.multiChart.

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

源代码中的行号：

a href =https://github.com/novus/nvd3/blob/master/src/models/multiChart.js#L34 =nofollow> https://github.com/novus/nvd3/blob/ master / src / models / multiChart.js＃L34

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

我传递的数据如下：

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

这篇关于在MultiBar图NVD3，d3.js顶部的线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！