Charts.js 图例添加点击事件

短命女 2021-10-08 05:44 621阅读 0赞

<!DOCTYPE html>
    <html lang="en">
        
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            
            <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">
            
            <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>