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

Mar*_*rko 14 chart.js

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

在此输入图像描述

我更愿意,如果我能设法让它像这样:2月2日

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
            }
        }
    });
Run Code Online (Sandbox Code Playgroud)

Ahm*_*lam 30

干得好:

jsfiddle:http://jsfiddle.net/1v9fy5mz/

码:

HTML

<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;
        }
      }
    }
  }
});
Run Code Online (Sandbox Code Playgroud)


Sep*_*ano 15

在你的options对象中添加它

tooltips: {
  displayColors: false
}
Run Code Online (Sandbox Code Playgroud)

  • 接受的答案给出了冗长的代码,甚至没有解释它是如何工作的。这应该是公认的答案。 (4认同)
  • 这个解决方案是最小的并且工作完美,但是如果您使用接受的解决方案,它只会删除颜色框,但标签后会有空格。 (3认同)
  • 在 3.8.0 版本中,“tooltip”配置也应该位于“plugins”中。例如 options.plugins.tooltip.displayColors = false; (3认同)
  • 最简单、最快 (2认同)
  • 更新:对于版本 3,他们已将其更改为“工具提示”而不是“工具提示” (2认同)

小智 6

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;

        }
      }
    }
Run Code Online (Sandbox Code Playgroud)