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

Question

首先，抱歉我的英语不好 ;)

也许我忘了什么，但有时，当我将鼠标光标放在图例标签上时，工具提示不会出现，有时会出现。它似乎是数据值的函数。看看下面的 Jsfiddle

两种情况之间的唯一区别是数据的值。正如你在这里看到的，当我的数据中有一个零值时，如果你将鼠标光标放在“2016”标签上，例如，工具提示不会出现

网页格式

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

javascript

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'

        }

    }

});

但是在这里，如果我用 eigth 替换零值，如果将鼠标光标放在图例上，则会出现工具提示

网页格式

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

javascript

var 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:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;intersect:&nbsp;false &nbsp;&nbsp;&nbsp;&nbsp;}工具提示 · Chart.js 文档var ctx = document.getElementById("graphCanvasYear");var chartdata = {&nbsp; datasets: [{&nbsp; &nbsp; borderColor: '#FFFFFF',&nbsp; &nbsp; hoverBorderColor: '#000000',&nbsp; &nbsp; borderAlign: 'inner',&nbsp; &nbsp; data: [10, 2, 4, 0, 5, 3],&nbsp; }],&nbsp; labels: ["2014", "2015", "2016", "2017", "2018", "2019"],};var barGraph = new Chart(ctx, {&nbsp; type: 'bar',&nbsp; data: chartdata,&nbsp; options: {&nbsp; &nbsp; layout: {&nbsp; &nbsp; &nbsp; padding: {&nbsp; &nbsp; &nbsp; &nbsp; left: 0,&nbsp; &nbsp; &nbsp; &nbsp; right: 0,&nbsp; &nbsp; &nbsp; &nbsp; top: 0,&nbsp; &nbsp; &nbsp; &nbsp; bottom: 90&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; legend: {&nbsp; &nbsp; &nbsp; display: false,&nbsp; &nbsp; },&nbsp; &nbsp; responsive: true,&nbsp; &nbsp; title: {&nbsp; &nbsp; &nbsp; position: 'bottom',&nbsp; &nbsp; &nbsp; display: true,&nbsp; &nbsp; &nbsp; text: 'Nb'&nbsp; &nbsp; },&nbsp; &nbsp; tooltips: {&nbsp; &nbsp; &nbsp; intersect: false&nbsp; &nbsp; }&nbsp; }});<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>