求jqplot(饼状图,柱状图可选)实例
jqplot,如果只是做一个饼状图或是只是做一个柱状图很容易实现.问题是项目开发中往往希望在用图界面能够切换统计图的类型.可以根据用户需要切换成饼状图或是柱状图,或是线状图.
谁有实例,给我一个吧.
[最优解释]
给你一个柱状图的实例的部分代码吧，
//lineCount表示需要显示几个不同的数据，
//results 是后台返回的数据，这里是我的形式，你按照你自己数据结构来写方法
for (var i = 0; i < lineCount; i++) {
//for bar
var bar_data = [];
for (var j = 0; j < results.length; j++) {
//base data
var date = new Date(results[j].Key);
//转化成保留2位小数的值
var temp = results[j].Value[i].key - results[0].Value[i].key;
temp = Math.round(temp * 100) / 100.0;
// for bar
bar_data.push(temp);
if (i == 0) {
bar_xaxises.push(date.add(Date.HOUR, -8).format('m/d'));
}
}
//for bar
bar_datas.push(bar_data);
bar_labels.push({ label: branchnames[i] });
}
//for bar
bar_config = {
seriesColors: ['#2181d8', '#a2d821', '#FCA604', '#C355EC'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true, location: 'n' },
rendererOptions: { fillToZero: true }
},
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
series: bar_labels,
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
legend: {
show: true
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
autoscale: true,
ticks: bar_xaxises
},
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
padMin: 0,
pad: 1.05
//tickOptions: { formatString: '%dKwh' }
}
}
};
$("#" + barChartPanel.id).html('');
$.jqplot(barChartPanel.id, chart.bar.datas, chart.bar.config);
