chart.js 2.7异步加载柱状图与饼图，柱状图添加点击事件，自定义柱状图的颜色

chart.js 2.7 API ： http://www.chartjs.org/docs/latest/

1、以下为加载图形所用到的公用参数及方法：

//自定义颜色对象
var color = [ {
    name : "red",
    color : "#dd4b39",
    fillcolor : "rgba(221,75,57,0.9)"
}, {
    name : "green",
    color : "#00a65a", 
    fillcolor : "rgba(0,166,90,0.9)",

}, {
    name : "orange",
    color : "#ff851b", 
    fillcolor : "rgba(255,133,27,0.9)"
}, {
    name : "light-blue",
    color : "#337ab7",
    fillcolor : "rgba(51,122,183,0.9)"
}, {
    name : "aqua",
    color : "#00c0ef",
    fillcolor : "rgba(0,192,239,0.9)"
}, {
    name : "maroon",
    color : "#d81b60",
    fillcolor : "rgba(216,27,96,0.9)"
}, {
    name : "teal",
    color : "#39cccc",
    fillcolor : "rgba(57,204,204,0.9)"
}, {
    name : "purple",
    color : "#605ca8",
    fillcolor : "rgba(96,92,168,0.9)"
}, {
    name : "lime",
    color : "#32CD32",
    fillcolor : "rgba(50,205,50,0.9)"
}, {
    name : "gold",
    color : "#FFD700",
    fillcolor : "rgba(255,215,0,0.9)"
} ];


// 装载公用配置参数
var backgroundColors = [];
var borderWidths = [];
var fillColors = [];
$.each(color, function(i, obj){
    backgroundColors.push(obj.color);
    fillColors.push(obj.fillcolor);
    borderWidths.push(1);
});

//公用参数
var params = {
        queryString : $("#queryString").val(),
        limit : 10
    }

// 图表横坐标或者图例文字的显示长度
function getLabel(label, length) {
    var res = label;
    if (label.length > length) {
        var array = label.split(" ");
        if (array.length >= 2) {
            res = array[0] + " " + array[1];
            if (res.length > length){
                res = label.substring(0, length);
            }
        } else {
            res = array[0];
        }
    }
    return res;
}   


// 创建饼图
function createPieChart(ctx, labels, data){
    var chart = new Chart(ctx, {
         type: 'doughnut',
         data: {
             labels : labels,
             datasets : [{
                 data : data,
                 backgroundColor : backgroundColors,
                 borderWidth : borderWidths
             }],
         },
         options : {
             legend : {
                 display : false
             },
             cutoutPercentage : 50,  //扇形距中心轴的百分比
             tooltips: {
                callbacks : {
                    title : function(items, data) {
                        var index = items[0].index; // 获取当前所选图形的索引下标
                        var labels = data.labels; // 找到他的原始label数组
                        return labels[index];
                    },
                    label : function(tooltipItem, data) {
//                          console.log(data);
                        var index = tooltipItem.index;
                        var value = common.formatNum(data.datasets[0].data[index]);
                        return value; // 此标签只处理返回的数组
                    }
                }
            }   
         }
    });

    return chart;
}

// 修改图形
function updateData(chart, labels, data) {
    chart.data.labels = labels;
    chart.data.datasets[0].data = data;
    chart.update();
    return chart;
}

2、利用chart.js画一个柱状图，具体js代码如下

//应用类型统计
function load_bar_chart(){
    //柱状图
    var productChartCanvas = document.getElementById("productBarChart").getContext("2d");

    //设置type参数
    params.type = "product";

    $.ajax({
        //提交数据的类型 POST GET
        type:"POST",
        //提交的网址
        url:"/../"+params.type+"/../product",
        //参数
        data:params,
        //返回数据的格式
        dataType: "json",
        //成功返回之后调用的函数             
        success:function(result){
            var labels = [];
            var data = [];
            var firstProduct;
            var count = result.length || 0;
            if (count > 0){
                $.each(result, function(i, obj){
                    if (i==0){
                        firstProduct = obj.name;
                    }
                    labels.push(obj.name); 
                    data.push(obj.count);
                    $("#productBarLabel").append("<li><nobr><i class='fa fa-square text-"+color[i].name+"'></i>&nbsp;<span title='单击查看["+obj.name+"]版本统计'><a href=''>"+obj.name+"</a></span></nobr></li>");
                });

                var bar = new Chart(productChartCanvas, {
                    type : "bar",
                    data : {
                        labels : labels,
                        datasets : [{
                            backgroundColor : backgroundColors,   //柱子的背景色
                            hoverBackgroundColor : "rgba(255,255,0,0.8)",  //鼠标放上时的颜色
                            data : data
                        }]
                    },
                    options : {
                         legend : {
                             display : false    //不显示图例
                         },
                         scales: {
                            xAxes: [{
                                gridLines: {
                                    display : false    //不显示表格线
                                },
                                ticks : {
                                    callback : function(value, index, values) {
                                        return getLabel(value, 10);  //长度超过20时，截取;
                                    }
                                }
                            }],
                            yAxes: [{
                                gridLines: {
//                                  display : false,    //不显示表格线
                                    offsetGridLines: true,
                                },
                                ticks: {
//                                  min: 0,   //设置Y轴的最小值为0
                                    beginAtZero:true,   //和min为0同样的效果
                                    callback : function(value, index, values) {
                                        return common.formatNum(value);  
                                    }
                                }
                            }]
                         },
                         tooltips: {
                              callbacks: {
                                  title : function (items, data){
                                      var index = items[0].index;       //获取当前所选图形的索引下标
                                      var labels = data.labels;         //找到他的原始label数组
                                      return labels[index];
                                  },
                                  label : function (tooltipItem, data){
                                      return common.formatNum(tooltipItem.yLabel);   //此标签只处理返回的数组
                                  },
                                  labelColor: function(tooltipItem, chart) {
                                      var index = tooltipItem.index;
                                      var data = chart.config.data;
                                      return {
                                          backgroundColor: data.datasets[0].backgroundColor[index]   // 选中时，提示图标显示柱状图原来的颜色
                                      }
                                  }
                              }
                         },

                         //给柱子添加点击事件"click"
                         events : ["mousemove", "mouseout", "click"],
                         onClick : function (event, bars){
                             var activeElement = bars[0];   //当前被选中的元素
                             var product = activeElement._model.label;
                             load_version_chart(product);
                         },
                         // 当图形加载完成后，触发的事件
//                       animation: {
//                           onComplete : function (data){
//                               load_version_chart(firstProduct);
//                           }
//                       }
                    }
                }); 

                // 当应用加载完成之后，加载第一个应用对应的版本信息
                if (bar){
                    load_version_chart(firstProduct);
                }
            }
        },
        //调用出错执行的函数
        error: function(){
            no_access_authority($("#productBarChart"));
        }         
    });
}

3、画一个饼图，建立与柱状图之间的关联，js代码如下：

//version饼图
var versionBar;
var ctx = document.getElementById("versionPieChart").getContext("2d");
//应用类型版本统计
function load_version_chart(product){
    $("#versionPieChart").show();
    var ul_html_object = $("#versionPieLabel");
    ul_html_object.empty();

    params.product = product;

    $.getJSON("/../../productVersion", params, function(result){
        var count = result.length || 0;
        if(count>0){
            var labels = [];
            var data = [];
            var count = result.length || 0;
            if (count > 0){
                $.each(result, function(i, obj){
                    labels.push(obj.name);
                    data.push(obj.count);

                    var name = getLabel(obj.name, 20);  //长度超过20时，截取
                    ul_html_object.append("<li><nobr><a herf='javascript:void(0);' class='J_version_detail'><i class='fa fa-circle-o text-"+color[i].name+"'></i>&nbsp;<span title='"+obj.name+"'>"+name+"</span></a></nobr></li>");
                });

//                  console.log(versionBar);
                if (versionBar){
                    versionBar = updateData(versionBar, labels, data);
                } else {
                    versionBar = createPieChart(ctx, labels, data);
                }

                if(count<10){
                    for(var i=0; i<10-count; i++){
                        ul_html_object.append("<li>&nbsp;</li>");
                    }
                }

                $(".J_version_detail").bind("click", function(){
                    var value = $(this).find("span").attr("title");
                    var condition = "product="+product+"&&" + "version="+value;
                    common.doSearchByCondition(condition);
                });

                $("#versionLabel").html(product + "<br>版本统计");
            }
        }else{
            $("#versionPieChart").hide();
            $("#versionLabel").html(product + "<br><br>无版本信息");
        }
    });
}