Javascript 如何将NVD3条形图转换为面积线图？

我的

目前我的NVD3图表是基于他们的

问题是，在我真正的应用程序中，我实际上有更多的条刻度数据（4000+），因此这些条变得非常薄，很难看到，因此我需要使用线面积图来代替。（这在我的plnkr示例中并不明显，因为它对条形图使用了一个小的假样本大小。）

有没有其他人试图做到这一点？将条形图转换为线面积图

代码：

var数据=[{
“键”：“价格”，
“颜色”：“4C73FF”，
“价值观”：[
[1443621600000, 71.89],
[1443619800000, 75.51],
[1443618000000, 68.49],
[1443616200000, 62.72],
[1443612600000, 70.39],
[1443610800000, 59.77]
]
}, {
“键”：“数量”，
“酒吧”：没错，
“价值观”：[
[1136005200000, 1],
[1138683600000, 2],
[1141102800000, 1],
[1143781200000, 0],
[1146369600000, 1],
[1149048000000, 0]
]
}];
nv.addGraph（函数（）{
var chart=nv.models.linePlusBarChart（）
.保证金({
前20名，
右:40,，
底数：50，
左：40
})
.x（功能（d，i）{
返回i
})
.y（功能（d）{
返回d[1]
})
.颜色（d3.比例.类别10（）.范围（））；
chart.xAxis.tickFormat（函数（d）{
var dx=data[0]。值[d]&&data[0]。值[d][0]| | 0；
//返回时间（小时）：
返回d3.time.format（“%I:%M”）（新日期（dx））；
});
图表1轴
.tickFormat（d3.format（'，f'））；
图表2轴
.d格式（函数（d）{
返回“$”+d3.format（“，f'）（d）
});
图.条.力（[0]）；
图表。线条。交互（错误）；
图表.高度（300）；
d3.选择（“#图表svg”）
.基准（数据）
.transition（）.持续时间（500）
.电话（图表）；
chart.update（）；
nv.utils.windowResize（图表更新）；
收益表；
});

开箱即用，NVD3为您提供（），它结合了线/条形图/面积图。注:

• yAxis1在左边，yAxis2在右边
• 后缀为“1”的元件图使用左y轴：lines1、bars1、stack1
• 您不能使用force，因为从1.8.1开始。您需要手动计算数据的y域，并使用yDomain1和yDomain2在图表上设置它们

最后，这里是一个使用示例数据的简单多图表（NVD3 1.8.1），左边是数量（面积），右边是价格（线）：

var数据=[{
“键”：“价格”，
“类型”：“行”，
"雅克西斯":2,，
“价值观”：[
[1443621600000, 71.89],
[1443619800000, 75.51],
[1443618000000, 68.49],
[1443616200000, 62.72],
[1443612600000, 70.39],
[1443610800000, 59.77],
]
}, {
“键”：“数量”，
“类型”：“区域”，
"雅克斯":1,，
“价值观”：[
[1136005200000, 1],
[1138683600000, 2],
[1141102800000, 1],
[1143781200000, 0],
[1146369600000, 1],
[1149048000000, 0],
]
}];
data=data.map（函数（系列）{
series.values=series.values.map（函数（d）{
返回{
x:d[0]，
y:d[1]
}
});
返回序列；
});
nv.addGraph（函数（）{
var chart=nv.models.multiChart（）
.保证金({
前20名，
右:40,，
底数：50，
左：40
})
.yDomain1（[0,10]）
.yDomain2（[01100]）//硬编码：<
.插值（“线性”）//不要平滑线条
.颜色（d3.比例.类别10（）.范围（））；
chart.xAxis.tickFormat（函数（d）{
返回d3.time.format（“%I:%M”）（新日期（d））；
});
chart.yAxis1.tickFormat（d3.format（'，f'）；
chart.yAxis2.tickFormat（函数（d）{
返回“$”+d3.format（“，f'）（d）
});
chart.lines2.interactive（false）；//右轴折线图
d3.选择（“svg#图表”）
.基准（数据）
.transition（）.duration（500）.调用（图表）；
chart.update（）；
nv.utils.windowResize（图表更新）；
收益表；
});
文本{
字体：12px无衬线；
}
svg{
显示：块；
}
html，
身体，
svg图表{
边际：0px；
填充：0px；
身高：100%；
宽度：100%；
}

这里有一个将线条、条和区域结合在一起的功能。谢谢，现在就来看看。。。想发布你的答案吗？我在工作，哈哈。。。我可以发布多图表示例作为答案。需要进一步定制吗？如果您有时间发布一个带有multichart示例的plunkr，这将是对其他用户答案的一个巨大奖励：）我正在尝试让它在我的应用程序中工作。遇到了一些错误，但应该在明天之前解决。基本上需要确保数据1显示在右Y轴上，数据2显示在左Y轴上。完美答案！感谢您对配置的解释和其他信息。我在这里也基于您的代码创建了一个plnkr：您知道
map
函数的用途吗？我不知怎的看到，对于
y1
轴值数组，这些对象有一个添加的
显示
对象以及一个
系列
和
系列索引
。map函数将每个值（例如[1136005200000，1]）转换为一个具有x和y字段的对象，因此您不需要调用
图表.x（）
和
chart.y（）
稍后。您提到的其他字段是为D3添加的。