我正在尝试使用nvd3创建垂直堆积条形图。我将使用离散数据值,而不是随机生成的值作为website上的示例。
我尝试使用Group / Stacked Bar Chart的实时代码示例,并输入包含我自己的值的JSON数据。我试图做的是从水平条形图中获取JSON数据并将其作为垂直条形图的数据。
这是我在实时代码示例中使用的数据,而不是组/堆积条形图中的数据:
[
{
"key": "Series1",
"color": "#d62728",
"values": [
{
"label" : "Group A" ,
"value" : -1.8746444827653
} ,
{
"label" : "Group B" ,
"value" : -8.0961543492239
} ,
{
"label" : "Group C" ,
"value" : -0.57072943117674
} ,
{
"label" : "Group D" ,
"value" : -2.4174010336624
} ,
{
"label" : "Group E" ,
"value" : -0.72009071426284
} ,
{
"label" : "Group F" ,
"value" : -0.77154485523777
} ,
{
"label" : "Group G" ,
"value" : -0.90152097798131
} ,
{
"label" : "Group H" ,
"value" : -0.91445417330854
} ,
{
"label" : "Group I" ,
"value" : -0.055746319141851
}
]
},
{
"key": "Series2",
"color": "#1f77b4",
"values": [
{
"label" : "Group A" ,
"value" : 25.307646510375
} ,
{
"label" : "Group B" ,
"value" : 16.756779544553
} ,
{
"label" : "Group C" ,
"value" : 18.451534877007
} ,
{
"label" : "Group D" ,
"value" : 8.6142352811805
} ,
{
"label" : "Group E" ,
"value" : 7.8082472075876
} ,
{
"label" : "Group F" ,
"value" : 5.259101026956
} ,
{
"label" : "Group G" ,
"value" : 0.30947953487127
} ,
{
"label" : "Group H" ,
"value" : 0
} ,
{
"label" : "Group I" ,
"value" : 0
}
]
}
]
我将函数调用替换为javascript中的data()数据:
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.xAxis
.tickFormat(d3.format(',f'));
chart.yAxis
.tickFormat(d3.format(',.1f'));
d3.select('#chart svg')
.datum(data)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
图表正确标记了我的系列,但未显示条形图。这个图表可以不采用这种类型的数据吗?我的数据使用水平条,但我想尽可能使用垂直条。
答案 0 :(得分:43)
组/堆积条形图( multiBarChart 模型)与x
和y
属性一起使用,其中y
是条形的高度, x
是标签,可能是某个数字或文字。
不幸的是,没有太多关于确切数据格式的文档,我发现的所有示例都使用一些令人困惑的函数来生成数据。所以这是我使用混合数字和文本标签工作的一个例子:
var chart = nv.models.multiBarChart();
d3.select('#chart svg').datum([
{
key: "S1",
color: "#51A351",
values:
[
{ x : "A", y : 40 },
{ x : "B", y : 30 },
{ x : 5, y : 20 }
]
},
{
key: "S2",
color: "#BD362F",
values:
[
{ x : "A", y : 60 },
{ x : "B", y : 50 },
{ x : 5, y : 70 }
]
}
]).transition().duration(500).call(chart);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css">
<div id="chart" style="height: 200px;"><svg></svg></div>
现在您的代码存在两个问题:
您需要删除要用文本标记的轴的tickFormat
tickFormat
函数为轴标签设置数字格式。它只有在标签可以转换为数字并且在您的情况下会产生NaN
时才有效。
您需要将label
和value
属性重命名为x
和y
,或者您需要创建函数来提供这些值:
var chart = nv.models.multiBarChart();
chart.x(function(d) { return d.label; });
chart.y(function(d) { return d.value; });
d3.select('#chart svg')
.datum( /* your data */ )
.transition().duration(500).call(chart);