亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如果數據中的值為零,則不會出現 chart.js 工具提示

如果數據中的值為零,則不會出現 chart.js 工具提示

浮云間 2023-03-03 15:21:30
首先,抱歉我的英語不好 ;)也許我忘了什么,但有時,當我將鼠標光標放在圖例標簽上時,工具提示不會出現,有時會出現。它似乎是數據值的函數??纯聪旅娴?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'        }    }});這是一個錯誤嗎?我忘記設置屬性了嗎?非常感謝你的幫助
查看完整描述

1 回答

?
哈士奇WWW

TA貢獻1799條經驗 獲得超6個贊

你的例子之間的區別在于第一個開始于0而另一個開始于2。我猜默認情況下它不會顯示0值的工具提示。

我嘗試更改一些設置,發現添加以下內容與您正在尋找的內容有類似的行為。

tooltips: {
    intersect: false
    }

工具提示 · Chart.js 文檔

http://img1.sycdn.imooc.com//6401a02d00010dd706550188.jpg

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/[email protected]"></script>


查看完整回答
反對 回復 2023-03-03
  • 1 回答
  • 0 關注
  • 178 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號