Chart.js 更改悬停文本

Question

当我将鼠标悬停在 3 月的数据点上且值为 15 时，它表示 1 月 15 日而不是 3 月 15 日，但它位于正确的位置。有办法解决这个问题吗？

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

<script>
var xyValues = [
  {x:"March", y:15},

];

new Chart("myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgb(0,0,255)",
      data: xyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      xAxes: [{ type: 'category', labels: ['January', 'February', 'March', 'April', 'May', 'June'] }],
      yAxes: [{ticks: {min: 6, max:16}}],
    }
  }
});
</script>

</body>
</html>

Answer 1

只需给一月和二月一个 null 值。

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

<script>
var xyValues = [
  null, null,
  {x:"March", y:15},
];

new Chart("myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgb(0,0,255)",
      data: xyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      xAxes: [{ type: 'category', labels: ['January', 'February', 'March', 'April', 'May', 'June'] }],
      yAxes: [{ticks: {min: 6, max:16}}],
    }
  }
});
</script>

</body>
</html>

Answer 2

您可以为此使用自定义标签回调来获取工具提示的正确数据：

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<body>
  <canvas id="myChart" style="width:100%;max-width:700px"></canvas>

  <script>
    var xyValues = [{
        x: "March",
        y: 15
      },

    ];

    new Chart("myChart", {
      type: "scatter",
      data: {
        datasets: [{
          pointRadius: 4,
          pointBackgroundColor: "rgb(0,0,255)",
          data: xyValues
        }]
      },
      options: {
        tooltips: {
          callbacks: {
            label: (ttItem, data) => (`(${data.datasets[ttItem.datasetIndex].data[ttItem.index].x}, ${data.datasets[ttItem.datasetIndex].data[ttItem.index].y})`)
          }
        },
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            type: 'category',
            labels: ['January', 'February', 'March', 'April', 'May', 'June']
          }],
          yAxes: [{
            ticks: {
              min: 6,
              max: 16
            }
          }],
        }
      }
    });
  </script>

</body>

</html>

编辑：

您也可以选择更新到 chart.js 的最新主要版本（第 3 版），此行为似乎已默认修复。

V3 中有一些重大的突破性变化，例如比例的定义方式，现在所有比例都是它们自己的对象，例如比例 ID 是对象键。对于所有更改，您可以阅读 migration guide

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>

<body>
  <canvas id="myChart" style="width:100%;max-width:700px"></canvas>

  <script>
    var xyValues = [{
        x: "March",
        y: 15
      },

    ];

    new Chart("myChart", {
      type: "scatter",
      data: {
        datasets: [{
          pointRadius: 4,
          pointBackgroundColor: "rgb(0,0,255)",
          data: xyValues
        }]
      },
      options: {
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          x: {
            type: 'category',
            labels: ['January', 'February', 'March', 'April', 'May', 'June']
          },
          y: {
            min: 6,
            max: 16
          },
        }
      }
    });
  </script>

</body>

</html>

Chart.js 更改悬停文本

Chart.js change hover text

javascript

charts

chart.js