Javascript - chatjs donut 在悬停时运行脚本

标签 javascript jquery html css charts

这道题看似简单,但我不知道怎么解。

我有这个codepen .我想要的是使用实际标题运行脚本。例如,如果带有“S: 7”的部分悬停,我想 console.log() “S: 7”。你能帮忙吗?

最佳答案

我不熟悉 chart.js,所以 this codepen有点hack,但在大多数情况下它似乎有效。它使用@drinor 对 this question 的回答中的代码.

一个潜在的问题是,如果您将鼠标悬停在一个特定的切片上,然后将鼠标从饼图上移开,然后再次将鼠标悬停在同一切片上,则不会向控制台写入任何内容。如果在这种情况下您确实想要控制台输出,您似乎可以通过添加设置 currentIndex = -1mouseout 事件来实现。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
        <style type="text/css">
            .container {
              width: 80%;
              margin: 15px auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h2>Chart.js — Pie Chart Demo (apples)</h2>
            <div>
                <canvas id="myChart"></canvas>
            </div>
        </div>

        <script type="text/javascript">

            var currentIndex = -1;

            Chart.defaults.global.hover.onHover = function(x) {
                if(x[0]) {
                    var index = x[0]._index;

                    if (index !== currentIndex) {
                        currentIndex = index;
                        console.log(x[0]._model.label + ': ' + x[0]._chart.config.data.datasets[0].data[index]);
                    }
                }
            };

            var ctx = document.getElementById("myChart").getContext('2d');
            var myChart = new Chart(ctx, {
              type: 'pie',
              data: {
                labels: ["M", "T", "W", "T", "F", "S", "S"],
                datasets: [{
                  backgroundColor: [
                    "#2ecc71",
                    "#3498db",
                    "#95a5a6",
                    "#9b59b6",
                    "#f1c40f",
                    "#e74c3c",
                    "#34495e"
                  ],
                  data: [12, 19, 3, 17, 28, 24, 7]
                }]
              }
            });
        </script>
    </body>
</html>

关于Javascript - chatjs donut 在悬停时运行脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41642330/

相关文章:

javascript - 重复设置 translate3d(10px,0,0) 并不是重复向右移动 div。如何让它发挥作用?

javascript - Jquery 或 Javascript 动画 Z-索引

jquery - 如何使用 jQuery 的 "data"取消选中复选框?

jquery - will_paginate 的无尽页面不适用于部分

jquery - knockout : Bind data object with select element's option

javascript - 访问另一个函数中的 jest.fn 函数

jquery - CSS "onclick"伪类不工作

javascript - jQuery/JavaScript 干净的字符串,因此只有单词存在

javascript - Vue.js 和 Immutable.js

javascript - mailto 使用 javascript