您的位置：首页 > Web前端 > JavaScript
Charts.js 图例添加点击事件

2017-01-17 19:55 411 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航