ChartJS 如何在悬停时隐藏其他行？

vkc1a9a2 于 2023-02-04 发布在 Chart.js

关注(0)|答案(1)|浏览(154)

我使用的是Chart.js v3，下面是代码，但它没有隐藏。目标是当我悬停在一行上时，它隐藏其他行及其标签。代码如下所示：

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.1/chart.min.js"></script>
  </head>
  <body>
    <canvas id="myChart" width="300" height="200"></canvas>
    <script>
        var ctx = document.getElementById("myChart").getContext("2d");
            var myChart = new Chart(ctx, {
            type: "line",
            data: {
                labels: [1, 2, 3, 4, 5],
                datasets: [{
                label: "Line 1",
                data: [1, 2, 3, 4, 5],
                borderColor: "red",
                backgroundColor: "rgba(255,0,0,0.2)"
                }, {
                label: "Line 2",
                data: [5, 4, 3, 2, 1],
                borderColor: "blue",
                backgroundColor: "rgba(0,0,255,0.2)"
                }, {
                label: "Line 3",
                data: [2, 4, 6, 8, 10],
                borderColor: "green",
                backgroundColor: "rgba(0,255,0,0.2)"
                }]
            },
            options: {
                hover: {
                mode: "index",
                intersect: true
                },
                animation: {
                duration: 0
                }
            }
            });

    </script>
  </body>
</html>

chart.js

来源：https://stackoverflow.com/questions/75281560/charjs-how-to-hide-other-lines-on-hover

1条答案

按热度按时间

wfsdck301#

我认为你应该在图表选项中实现onHover钩子。基于悬停的元素，你可以隐藏其他元素。我想有两点需要注意：
1.悬停模式应为'point'而非'index'，否则将隐藏所有数据集
1.要在图表上有一致的视图，您应该在y刻度上设置min和max。

var ctx = document.getElementById("myChart").getContext("2d");
            var myChart = new Chart(ctx, {
            type: "line",
            data: {
                labels: [1, 2, 3, 4, 5],
                datasets: [{
                label: "Line 1",
                data: [1, 2, 3, 4, 5],
                borderColor: "red",
                backgroundColor: "rgba(255,0,0,0.2)"
                }, {
                label: "Line 2",
                data: [5, 4, 3, 2, 1],
                borderColor: "blue",
                backgroundColor: "rgba(0,0,255,0.2)"
                }, {
                label: "Line 3",
                data: [2, 4, 6, 8, 10],
                borderColor: "green",
                backgroundColor: "rgba(0,255,0,0.2)"
                }]
            },
            options: {
                scales: {
                  y: {
                    beginAtZero: true,
                    max: 10
                  }
                },
                onHover(e, elements, chart) {
                  if (elements.length) {
                    for (const el of elements) {
                      const dsCount = chart.data.datasets.length;
                      for (let i = 0; i < dsCount; i++) {
                       if (i !== el.datasetIndex) {
                         chart.setDatasetVisibility(i, false);
                       }
                      }
                    }
                    chart.update();
                  } else {
                    const dsCount = chart.data.datasets.length;
                    for (let i = 0; i < dsCount; i++) {
                       chart.setDatasetVisibility(i, true);
                    }
                    chart.update();
                  }
                },
                hover: {
                mode: "point",
                intersect: true
                },
                animation: {
                duration: 0
                }
            }
            });

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.1/chart.min.js"></script>
  </head>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

赞(0）回复(0）举报 2023-02-04

我来回答

ChartJS 如何在悬停时隐藏其他行？

1条答案

相关问题

热门标签

最新问答