Question

将鼠标悬停在一个点上时，我的雷达图将不会显示数据值。 Chart.js 2.8.0

<script src="./vendor/chart.js/Chart.js"></script>
<canvas id="radar-chart" width="1200" height="550"></canvas>
<script>
new Chart(document.getElementById("radar-chart"),{
    type: 'radar',
    data: {
        labels: ["Buisiness Loans","Residential Loans","Aggriculture Loans","Student Loans","Personal Loans"],
        datasets: [{
            label: "Guthrie",
            data: [13,22,21,29,15],
            }],
    }
});
</script>

当我使用模板on this page时，仍然会发生这种情况。因此，可能不是直接由于chart.js中的某些内容引起的。铬和边缘都出现问题。我没有加载其他插件，也没有css。

编辑1：悬停将仅显示标签，而不显示该点的数据值。

Answer 1

这似乎是2.8.0中的回归。下面的两个示例代码段除了使用的Chart.js版本相同外，其余均相同。工具提示值存在于2.7.2中，但不存在于2.8.0中。

This is apparently fixed and will be included in 2.9.0.

请注意，您可以使用自定义工具提示回调来解决该问题：

any[]

new Chart(document.getElementById("radar-chart"), {
  type: 'radar',
  data: {
    labels: ["Buisiness Loans", "Residential Loans", "Aggriculture Loans", "Student Loans", "Personal Loans"],
    datasets: [{
      label: "Guthrie",
      data: [13, 22, 21, 29, 15],
    }],
  },
  options: {
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          return data.datasets[tooltipItem.datasetIndex].label + ": " + tooltipItem.yLabel;
        }
      }
    }
  }
});

2.8.0;损坏的工具提示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="radar-chart" width="1200" height="550"></canvas>

new Chart(document.getElementById("radar-chart"), {
  type: 'radar',
  data: {
    labels: ["Buisiness Loans", "Residential Loans", "Aggriculture Loans", "Student Loans", "Personal Loans"],
    datasets: [{
      label: "Guthrie",
      data: [13, 22, 21, 29, 15],
    }],
  }
});

2.7.2;工作提示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="radar-chart" width="1200" height="550"></canvas>

new Chart(document.getElementById("radar-chart"), {
  type: 'radar',
  data: {
    labels: ["Buisiness Loans", "Residential Loans", "Aggriculture Loans", "Student Loans", "Personal Loans"],
    datasets: [{
      label: "Guthrie",
      data: [13, 22, 21, 29, 15],
    }],
  }
});

Chart.js雷达未显示数据值

1 个答案: