Charts.js 图例添加点击事件

来源：互联网发布：海通证券行情软件编辑：程序博客网时间：2024/06/09 03:13
<!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>
0 0