当前位置: 代码迷 >> 跨浏览器开发 >> 求jqplot(饼状图,柱状图可选)范例
  详细解决方案

求jqplot(饼状图,柱状图可选)范例

热度:9716   发布时间:2013-02-26 00:00:00.0
求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