Charts.js 图例添加点击事件
越国源
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
FD-MES系统
</title>
<%-- <jsp:include page="/publicMain/link.jsp">
</jsp:include>
<jsp:include page="/publicMain/black_js.jsp">
</jsp:include>
--%>
</head>
<body class="nav-md">
<!-- <div id="graphx" style="width:100%; height:300px;"></div> -->
<canvas id="mybarChart">
</canvas>
</body>
<script type="text/javascript">
var t0 = sessionStorage.getItem("t0");
var t1 = sessionStorage.getItem("t1");
var datas = new Array();
var label = new Array();
var ds = new Array();
var newdata = new Array();
$(document).ready(function() {
$.ajax({
type: 'POST',
url: '/fudaMes/workShopOverview/getAllMachProduceStatusTimeDetail',
data: {
"t0": t0,
"t1": t1
},
success: function(data) {
var ctx = document.getElementById("mybarChart");
datas = data[data.length - 1];
console.log(JSON.stringify(datas) + "jsonstringify");
for (var i in data) {
newdata[i] = data[i];
console.log(data.length - 1 + "data.length-1");
if (i == data.length - 2) {
break;
}
}
for (var d = 0; d <= data.length; d++) {
ds[d] = d + " "
}
// newdata=[{"label":"待机","backgroundColor":"yellow","data":[0,0,0,28565,0,0],"time":"2011-222-222"},{"label":"调机","backgroundColor":"red","data":[0,0,0,12063,0,0],"time":"2011-222-222"},{"label":"正常","backgroundColor":"black","data":[0,0,0,398431,0,0],"time":"2011-222-222"}]
//label.push(""+label)
// label=[""+datas[0], ""+datas[1], ""+datas[2], ""+datas[3], ""+datas[4], ""+datas[5], ""+datas[6], ""+datas[7], ""+datas[8], ""+datas[9]]
console.log(datas[0] + "datas");
debugger
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
// labels: ["2016-12-19 16:42:24,2016-12-26 16:42:24", "2016-12-19 16:42:24,2016-12-26 16:42:24", "2016-12-19 16:42:24,2016-12-26 16:42:24", "2016-12-19 16:42:24,2016-12-26 16:42:24", "2016-12-19 16:42:24,2016-12-26 16:42:24", "2016-12-19 16:42:24,2016-12-26 16:42:24", "2016-12-19 16:42:24,2016-12-26 16:42:24", "2016-12-19 16:42:24,2016-12-26 16:42:24", "2016-12-19 16:42:24,2016-12-26 16:42:24", "2016-12-19 16:42:24,2016-12-26 16:42:24", "2016-12-19 16:42:24,2016-12-26 16:42:24", "2016-12-19 16:42:24,2016-12-26 16:42:24"],
// labels:["1","2","3","4","5","6","7","8","9","10","11","12"],
labels: ds,
// labels:label,
datasets: newdata
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
}]
},
legend: {
show: true,
//显示图例
onClick: function(event, legendItem) { //图例点击事件
var machStatus = legendItem.text;
twoDetailBroken(machStatus, start, end);
}
align: 'right',
onClick: function(event, legendItem) {
var machStatus = legendItem.text;
twoDetailBroken(machStatus, start, end);
}
}
}
});
}
});
});
</script>
</html>
类似资料：