Question

我是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中添加更多行？

谢谢：）

Answer 1

使用nvd3.js绘制Line Plus条形图时，在JSON中传入图表时，请确保添加属性"bar" : true，以表示条形图中的特定数据，休息将加载为折线图。

传入图表的样本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在Line Plus Bar Chart中添加更多行？

1 个答案: