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

a1o7rhls 于 2022-11-07 发布在 Chart.js

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

当使用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>

外观：