欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-06 23:26:22
...

chart.js 2.7 APIhttp://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>无版本信息");
        }
    });
}