Question

我正在使用引导按钮栏和图表JS，每个按钮必须加载不同的图表。按钮似乎工作正常，但当我将鼠标悬停在图表上（特别是第三个）时，它们有时会出现故障，并会暂时显示不同的图表。我不知道是什么导致了这一点。

这是我的代码：https://jsfiddle.net/hdesh7/qbwt6741/

HTML：

<html lang="en">

<!---This is for importing bootstrap and the CSS File--->
  <head>
      <title>Dashboard</title>
      <link rel="stylesheet" href="dashboardstyle.css">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
      <link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
  </head>

  <body>
  <div class = "col-md-6">
            <div class="btn-group buttons" role="group" aria-label="Graphs">
                <button type="button" class="btn btn-secondary" id="left" onclick = "loadFriends()">Friend Growth</button>
                <button type="button" class="btn btn-secondary" id="middle" onclick = "loadNetwork()">Network Growth</button>
                <button type="button" class="btn btn-secondary" id="right" onclick = "loadView()">Profile View Number</button>

            </div>
            <div class = "chart">
                <canvas id = "chartCon">
                    <p>Choose a chart</p>
                </canvas>
            </div>
        </div>
  <script>
        var canvas = document.getElementById("chartCon");
        var ctx = canvas.getContext("2d");
        ctx.font = "15px Helvetica Neue";
        ctx.textAlign = "center";
        ctx.fillText("Choose a graph", canvas.width/2, canvas.height/2);


        function loadFriends(){

            var ctxL = document.getElementById("chartCon").getContext('2d');
            var myLineChart = new Chart(ctxL, {
                type: 'line',
                data: {
                    labels: ["January", "February", "March", "April", "May", "June", "July"],
                    datasets: [
                        {
                            label: " Total Friends:",
                            backgroundColor: "rgba(0,0,0,0)",
                            borderColor: "rgba(100,100,233,0.5)",
                            data: [10, 20, 35, 45, 56, 61, 70]
                        }

                    ]
                },
                options: {
                    title:{
                        display: true,
                        text: 'Friend Growth'
                    },
                    legend:{
                        display:false
                    }
                }    
            });

        }

        function loadNetwork(){

            var ctxL = document.getElementById("chartCon").getContext('2d');
            var myLineChart = new Chart(ctxL, {
                type: 'line',
                data: {
                    labels: ["January", "February", "March", "April", "May", "June", "July"],
                    datasets: [
                        {
                            label: "Network Growth:",
                            backgroundColor: "rgba(0,0,0,0)",
                            borderColor: "rgba(100,100,233,0.5)",
                            data: [10, 50, 75, 120, 240, 500, 1000]
                        }

                    ]
                },
                options: {
                    title:{
                        display: true,
                        text: 'Network Growth'
                    },
                    legend:{
                        display: false
                    }
                }    
            });

        }

        function loadView(){

            var ctxL = document.getElementById("chartCon").getContext('2d');
            var myLineChart = new Chart(ctxL, {
                type: 'line',
                data: {
                    labels: ["January", "February", "March", "April", "May", "June", "July"],
                    datasets: [
                        {
                            label: "Number of Times Profile was Viewed:",
                            backgroundColor: "rgba(0,0,0,0)",
                            borderColor: "rgba(100,100,233,0.5)",
                            data: [10, 20, 22, 45, 56, 71, 65]
                        }

                    ]
                },
                options: {
                    title:{
                        display: true,
                        text: 'Times Profile was Viewed'
                    },
                    legend:{
                        display: false
                    }
                }    
            });

        }
    </script>
</body>

</html>

CSS：

.buttons{
    margin-top: 10px;
    height: 50px;
}

.chart{
    height: 200px;
    margin-bottom: 10px;
}

图表JS在悬停时出现故障

0 个答案: