ボタンのクリックでnvd3ライブラリを使用して個別の棒グラフを実装しています。ここでgenerateBarChartメソッドを呼び出しています。そのためのコードです:
generateBarChart = function(data, options) {
if (!$.isArray(data)) {
if (!$.isPlainObject(data)) {
data = $.makeArray(data);
} else {
try {
data = $.parseJSON(data);
} catch(err) {
console.error(data, "generateBarChart error", err.message, err.stack);
data = [];
}
}
}
var chart1;
if (!$.isPlainObject(options)) {
options = {};
}
options = $.extend(true, {
container : "#svgChart",
title : "",
titleStyle : {
x : 500,
y : 200,
fontFamily : "sans-serif",
fontSize : "20px",
fill : "black"
}
}, options);
nv.addGraph(function() {
chart1 = nv.models.discreteBarChart().x(function(d) {
return d.label || ""
}).y(function(d) {
return d.value || 0
});
var selectedChart = d3.select(options.container).datum(dataserver(data)).transition().duration(500);
selectedChart = selectedChart.call(chart1);
//d3.select(options.container).append("text").attr("x", options.titleStyle.x).attr("y", options.titleStyle.y).attr("font-family", options.titleStyle.fontFamily).attr("font-size", options.titleStyle.fontSize).attr("fill", options.titleStyle.fill).text(options.title);
$(options.container).css({
}).parent().css("text-align", "center").prepend('<h5 class="text-center" >' + options.title + '</h5>');
nv.utils.windowResize(function() {
chart1.update();
});
return chart1;
});
return chart1;
};
function dataserver(data) {
for ( i = 0; i < data.length; i++) {//TODO
var name = data[i].name;
//TODO
var itemAmount = data[i].itemAmount;
//TODO
}
return [{
"color" : "#d62728",
"values" : [{
"label" : name,
"value" : itemAmount
}]
}];
}
次のリンク ( http://nvd3.org/livecode/#codemirrorNav ) を参照して DiscreteBarchart を生成します