图表js v2工具提示回调换行符

Chart js v2 tooltip callback line breaks

本文关键字:回调 换行符 工具提示 v2 js 图表      更新时间:2023-09-26

我正在尝试在chart js v2工具提示回调中添加换行符

我代码:

var myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var tooltip = "example tooltip";
          var otherTooltip = "other tooltip";
          return tooltip + "'n'r" + otherTooltip;
        }
      }
    }
  }
});

使用'r, 'n或两者的组合不工作,有人知道吗?

我用的是chart js v2.3.0。

我已经解决了这个问题!

将工具提示文本转换为字符串数组(我将跳过上面的代码)如

...
label: function(tooltipItem, data) {
  var firstTooltip = "tooltip1";
  var otherTooltip = "tooltip2";
  var tooltip = new Array(firstTooltip, otherTooltip);
  return tooltip;
}

瞧!

现在工具提示有换行了

要做到这一点,只需为tooltip属性添加一个回调函数,该函数返回字符串数组,每个字符串将被放置在新行中。

tooltips: {
            callbacks: {
                label: function (tooltipItem, data) {
                    return ['first thing', 'another thing', 'and another one'];
                }
            }
            }

https://jsfiddle.net/alelase/6f8wrz03/3/

尝试使用:

return tooltip + "<br />" + otherTooltip;