chart.js 2.7异步加载柱状图与饼图,柱状图添加点击事件,自定义柱状图的颜色
程序员文章站
2022-03-06 23:26:22
...
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> <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> <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> </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>无版本信息");
}
});
}
上一篇: JavaScript如何从控制台输出
下一篇: 火狐加载css不成功怎么办