Charts.js 图例添加点击事件

最新推荐文章于 2024-05-26 09:57:59 发布

i秋风伴落叶

最新推荐文章于 2024-05-26 09:57:59 发布

阅读量7.8k

点赞数 1

本文链接：https://blog.csdn.net/zxf1242652895/article/details/54586131

版权

JavaScript/Jquery 同时被 3 个专栏收录

58 篇文章 2 订阅

订阅专栏

web

28 篇文章 0 订阅

订阅专栏

HTML5

14 篇文章 1 订阅

订阅专栏

<!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>