问题:

I am trying to use nvd3 to create a vertical stacked bar chart. I will be using discrete data values, as opposed to randomly generated values as the example on their website.

I have tried to play around with the live code example of the Group / Stacked Bar Chart and put in JSON data containing my own values. What I tried to do was take the JSON data from the horizontal bar chart and put it in as the data for the vertical bar chart.

This is the data I used on the live code example in place of the data in the Group / Stacked Bar Chart:

[   {     "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        }     ]   } ]

I replaced the function call to data() in the javascript to 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; });

The graph properly labels my series but does not show the bars. Can this graph not take this type of data? I got my data working with the horizontal bars, but I would like to use vertical bars if possible.

回答1:

The group/stacked bar chart (the multiBarChart model) is used with x and y attributes, where y is the height of the bar and x is the label and may be some number or a text.

Unfortunately there isn't much documentation on the exact data format and all examples I found use some confusing functions to generate data. So here's an example I got working using mixed numeric and text labels:

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);

Now there are two issues with your code:

You need to remove the tickFormat for axis you intend to label with texts.
The tickFormat function sets a number format for the axis' labels. It will only work if the label can be converted to a number and would result in NaN in your case.

You need either to rename the label and value attributes to x and y or you need to create functions to provide those values:

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);

转载请标明出处:nvd3 Stacked Bar Chart with discrete values

文章来源: nvd3 Stacked Bar Chart with discrete values

标签

chart

bar