如果数据中的值为零，则不会出现 chart.js 工具提示

Question

首先，抱歉我的英语不好 ;)也许我忘了什么，但有时，当我将鼠标光标放在图例标签上时，工具提示不会出现，有时会出现。它似乎是数据值的函数。看看下面的 Jsfiddle两种情况之间的唯一区别是数据的值。正如你在这里看到的，当我的数据中有一个零值时，如果你将鼠标光标放在“2016”标签上，例如，工具提示不会出现网页格式<canvas id="graphCanvasYear" width="680" height="340" class="chartjs-render-monitor" style="display: block; width: 680px; height: 340px;"></canvas>javascriptvar ctx = document.getElementById("graphCanvasYear");var chartdata = {    datasets: [{        borderColor: '#FFFFFF',        hoverBorderColor: '#000000',        borderAlign: 'inner',        data: [10, 2, 4, 0, 5, 3],    }],    labels: ["2014", "2015", "2016", "2017", "2018", "2019"],};var barGraph = new Chart(ctx, {    type: 'bar',    data: chartdata,    options: {        layout: {            padding: {                left: 0,                right: 0,                top: 0,                bottom: 90            }        },        legend: {            display: false,        },        responsive: true,        title: {            position: 'bottom',            display: true,            text: 'Nb'        }    }});但是在这里，如果我用 eigth 替换零值，如果将鼠标光标放在图例上，则会出现工具提示网页格式<canvas id="graphCanvasYear" width="680" height="340" class="chartjs-render-monitor" style="display: block; width: 680px; height: 340px;"></canvas>javascriptvar ctx = document.getElementById("graphCanvasYear");var chartdata = {    datasets: [{        borderColor: '#FFFFFF',        hoverBorderColor: '#000000',        borderAlign: 'inner',        data: [10, 2, 4, 8, 5, 3],    }],    labels: ["2014", "2015", "2016", "2017", "2018", "2019"],};var barGraph = new Chart(ctx, {    type: 'bar',    data: chartdata,    options: {        layout: {            padding: {                left: 0,                right: 0,                top: 0,                bottom: 90            }        },        legend: {            display: false,        },        responsive: true,        title: {            position: 'bottom',            display: true,            text: 'Nb'        }    }});这是一个错误吗？我忘记设置属性了吗？非常感谢你的帮助

Answer 1

你的例子之间的区别在于第一个开始于0而另一个开始于2。我猜默认情况下它不会显示0值的工具提示。

我尝试更改一些设置，发现添加以下内容与您正在寻找的内容有类似的行为。

tooltips: {
    intersect: false
    }

工具提示 · Chart.js 文档

var ctx = document.getElementById("graphCanvasYear");

var chartdata = {

  datasets: [{

    borderColor: '#FFFFFF',

    hoverBorderColor: '#000000',

    borderAlign: 'inner',

    data: [10, 2, 4, 0, 5, 3],

  }],

  labels: ["2014", "2015", "2016", "2017", "2018", "2019"],

};

var barGraph = new Chart(ctx, {

  type: 'bar',

  data: chartdata,

  options: {

    layout: {

      padding: {

        left: 0,

        right: 0,

        top: 0,

        bottom: 90

      }

    },

    legend: {

      display: false,

    },

    responsive: true,

    title: {

      position: 'bottom',

      display: true,

      text: 'Nb'

    },

    tooltips: {

      intersect: false

    }

  }

});

<canvas id="graphCanvasYear" width="680" height="340" class="chartjs-render-monitor" style="display: block; width: 680px; height: 340px;"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>