光标选择多个点而不是一个点 - chart.js

Question

使用 Chart.js 库渲染图表时，光标会选择多个点而不是一个点。当图表足够小（大约 12 条记录）时，它会按预期工作 - 只有一个点和测量是用光标选择的。然而，当有更多记录（约 96 条）时，它变得非常不可读。我希望图表能够容纳 4 到 96 条记录并且看起来仍然可读。

有什么设置可以用来消除这个问题吗？

基础html模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>{{ title }}</title>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
</head>

<body>
<div style="text-align:center">
<h1>{{ title }}</h1>

 <div>Last reading: {{ last_temperature }} ℃ </div>

<canvas id="chart" width="1200" height="800"></canvas>
<script>

      // bar chart data
      var barData = {
        labels : [
          {% for item in labels %}
            "{{ item }}",
          {% endfor %}
        ],

        datasets : [{
          bezierCurve : false,
          data : [
        {% for item in values %}
              {{ item }},
            {% endfor %}]
          }
    ]
      }

      Chart.defaults.global.tooltipYPadding = 16;
      Chart.defaults.global.tooltipCornerRadius = 0;
      Chart.defaults.global.responsive = false;

      // get bar chart canvas
      var mychart = document.getElementById("chart").getContext("2d");

      // draw bar chart
      var LineChartDemo = new Chart(mychart).Line(barData, {
        scaleStartValue: 0,
        scaleShowLabels: true,
        bezierCurve: false,
      });

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

外观：

Answer 1

您使用的 chart.js 版本已有 7 年历史。如果您更新到最新版本的 chart.js (3.7.1)，您就不会遇到这个问题。

光标选择多个点而不是一个点 - chart.js

Cursor selects multiple points instead of just one - chart.js

html

javascript

charts

chart.js