如何从工具提示中删除正方形标签,并使其信息在一行中?

j91ykkif  于 2022-11-07  发布在  Chart.js
关注(0)|答案(4)|浏览(135)

如何从工具提示中删除此方块?

我更希望我能设法只有这样一行:二月至二日

var data = {
        labels: ['January', 'February', 'March'],
        datasets: [
        {
            data: [1,2,3]
        }
        ]
    };

    var myLineChart = new Chart(document.getElementById('chart'), {
        type: 'line',
        data: data,
        options: {
            legend: {
                display: false
            }
        }
    });
ntjbwcob

ntjbwcob1#

将其添加到options对象中

tooltips: {
  displayColors: false
}

版本3或更高版本的更新(来自下面的@hanumanDev):

从工具提示中删除's'

tooltip: {
  displayColors: false
}
inb24sb2

inb24sb22#

给你:
jsfiddle:http://jsfiddle.net/1v9fy5mz/的参数值
密码:
超文本标记语言
<canvas id="canvas"></canvas>
js:

var ctx = document.getElementById("canvas").getContext("2d");

var data = {
  labels: ['January', 'February', 'March'],
  datasets: [{
    data: [1, 2, 3]
  }]
};

var myLineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    showAllTooltips: true,
    tooltips: {
      custom: function(tooltip) {
        if (!tooltip) return;
        // disable displaying the color box;
        tooltip.displayColors = false;
      },
      callbacks: {
        // use label callback to return the desired label
        label: function(tooltipItem, data) {
          return tooltipItem.xLabel + " :" + tooltipItem.yLabel;
        },
        // remove title
        title: function(tooltipItem, data) {
          return;
        }
      }
    }
  }
});
ubby3x7f

ubby3x7f3#

tooltips: {
      displayColors: false,
      callbacks: {
        // use label callback to return the desired label
        label: function(tooltipItem, data) {
          return tooltipItem.xLabel + " :" + tooltipItem.yLabel;
        },
        // remove title
        title: function(tooltipItem, data) {
          return;

        }
      }
    }
c9x0cxw0

c9x0cxw04#

在3.8.0版的chart.js插件中,工具提示配置需要放在插件配置对象中,如下所示:

options: {
  plugins: {
    tooltip: {
      displayColors: false
    }
  }
}

相关问题