如何使用 nvd3.js 在 Line Plus 条形图中添加更多线条？答案

【问题标题】：how i can put more lines in Line Plus Bar Chart using nvd3.js?如何使用 nvd3.js 在 Line Plus 条形图中添加更多线条？
【发布时间】：2014-06-25 01:46:50
【问题描述】：

我是 javascript 的新手，我想尝试使用 javascript 可视化数据，尤其是 d3.js。我找到了我想在 nvd3.js 中构建的示例图 (http://nvd3.org/examples/linePlusBar.html) 这是折线图和条形图组合在一个地方，我尝试将其修改为相同的 (http://www.highcharts.com/demo/combo-multi-axes)，但我仍然做不到那个。

我的问题是，如何使用 nvd3.js 在 Line Plus Bar Chart 中添加更多线条？

谢谢:)

【问题讨论】：

标签： d3.js nvd3.js

【解决方案1】：

当您使用 nvd3.js 绘制线加条形图时，在您传递到图表中的 JSON 中确保添加属性 "bar" : true 以在 Bars 中表示特定数据，其余部分将加载为折线图。

传入图表的示例JSON 如下所示：

[{
    "key" : "Bar Chart",
    "bar" : true,
    "color" : "#ccf",
    "values" : [[1136005200000, 1271000.0], [1138683600000, 1271000.0], [1141102800000, 1271000.0], [1143781200000, 0], [1146369600000, 0]]
}, {
    "key" : "Line Chart1",
    "color" : "#c2f",
    "values" : [[1136005200000, 71.89], [1138683600000, 75.51], [1141102800000, 68.49], [1143781200000, 62.72], [1146369600000, 70.39]]
}, {
    "key" : "Line Chart2",
    "color" : "#cff",
    "values" : [[1136005200000, 89], [1138683600000, 51], [1141102800000, 49], [1143781200000, 72], [1146369600000, 39]]
}]

更新

通过查看您的小提琴 here ，我在控制台中找到了以下内容

 - Refused to execute script from 'https://raw.githubusercontent.com/novus/nvd3/master/lib/d3.v3.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

 - Refused to execute script from 'https://raw.githubusercontent.com/novus/nvd3/master/nv.d3.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

 - Refused to execute script from 'https://raw.githubusercontent.com/novus/nvd3/master/src/models/linePlusBarChart.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

基本上它很难加载d3.js 和nvd3.js，我用js 文件的新链接更新了fiddle here，它似乎工作正常。

希望对你有帮助

【讨论】：

感谢您的回答，但是 nvd3.js 中“bar”的默认值是 true，我已经尝试过了，但它并不像我想要的那样完美。我想和highcharts.com/demo/combo-multi-axes,,i 一样，希望你能给我一些解释如何构建它，谢谢:)
您能否将您的代码添加到Fiddle 以便查看。
感谢修复我的 jsfiddle，但是在图表顶部，名称线/条形图列表可以关闭/打开，但是当想要关闭折线图 2 时它没有关闭，我如何可以修吗？谢谢 :)
让上面的答案与被问到的当前问题相关，如果它有助于解决您当前的问题，请接受该答案。并将新问题发布为新问题。这是一个不同的问题。
如果答案解决了您提出的问题，您能否接受此答案，因此它不会出现在未回答部分中。