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

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

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

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

  1. var data = {
  2. labels: ['January', 'February', 'March'],
  3. datasets: [
  4. {
  5. data: [1,2,3]
  6. }
  7. ]
  8. };
  9. var myLineChart = new Chart(document.getElementById('chart'), {
  10. type: 'line',
  11. data: data,
  12. options: {
  13. legend: {
  14. display: false
  15. }
  16. }
  17. });
ntjbwcob

ntjbwcob1#

将其添加到options对象中

  1. tooltips: {
  2. displayColors: false
  3. }

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

从工具提示中删除's'

  1. tooltip: {
  2. displayColors: false
  3. }
inb24sb2

inb24sb22#

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

  1. var ctx = document.getElementById("canvas").getContext("2d");
  2. var data = {
  3. labels: ['January', 'February', 'March'],
  4. datasets: [{
  5. data: [1, 2, 3]
  6. }]
  7. };
  8. var myLineChart = new Chart(ctx, {
  9. type: 'line',
  10. data: data,
  11. options: {
  12. showAllTooltips: true,
  13. tooltips: {
  14. custom: function(tooltip) {
  15. if (!tooltip) return;
  16. // disable displaying the color box;
  17. tooltip.displayColors = false;
  18. },
  19. callbacks: {
  20. // use label callback to return the desired label
  21. label: function(tooltipItem, data) {
  22. return tooltipItem.xLabel + " :" + tooltipItem.yLabel;
  23. },
  24. // remove title
  25. title: function(tooltipItem, data) {
  26. return;
  27. }
  28. }
  29. }
  30. }
  31. });
展开查看全部
ubby3x7f

ubby3x7f3#

  1. tooltips: {
  2. displayColors: false,
  3. callbacks: {
  4. // use label callback to return the desired label
  5. label: function(tooltipItem, data) {
  6. return tooltipItem.xLabel + " :" + tooltipItem.yLabel;
  7. },
  8. // remove title
  9. title: function(tooltipItem, data) {
  10. return;
  11. }
  12. }
  13. }
c9x0cxw0

c9x0cxw04#

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

  1. options: {
  2. plugins: {
  3. tooltip: {
  4. displayColors: false
  5. }
  6. }
  7. }

相关问题