Chartjs 工具提示換行符

Question

是否可以在 chartjs 工具提示中換行？

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>"

我想用新行替換“：”。

我試過
 , \ , \\n和<br />無濟於事。

更新：我已經更改了我接受的答案，因為chart.js是第 2 版。

Answer 1

如果您使用的是 2.0.0-beta2，您可以使用工具提示回調並在那里返回字符串數組。

tooltips: {
    mode: 'single',
    callbacks: {
        afterBody: function(data) {
            var multistringText = ['first string'];
            // do some stuff
            multistringText.push('another string');

            return multistringText;
        }
    }
}

Answer 2

實際上所有工具提示回調都支持多行文本，您可以照常使用label回調。 默認情況下，它將數據標簽呈現為工具提示文本。

引用自文檔：

所有函數都必須返回一個字符串或一個字符串數組。 字符串數組被視為多行文本。

示例代碼：

tooltips: {
    callbacks: {
      label: (tooltipItem, data) => {
        if (tooltipItem.index % 2)
          return ['Item 1', 'Item 2', 'Item 3'];
        else
          return 'Single line';
      }
    }
  }

Answer 3

您可以使用工具提示頁腳回調，它也不會為每個列表呈現彩色方塊。

 tooltips: { callbacks: { label: function(tooltipItem, data) { let label = data.datasets[tooltipItem.datasetIndex].label; let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; return label + ': ' + value; }, footer: function(tooltipItems, data) { return ['new line', 'another line']; } } }

Answer 4

目前，無法向工具提示或軸標簽添加換行符。 現在開發人員正在討論實現選項； 可以在Allow wrapping in axis labels (issue on github) 中找到討論。

Answer 5

這對我有用。 只需簡單地返回一個字符串數組作為工具提示中的標簽。

 tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        let label = "Line 1";
        let label2 = "Line 2";
        return [label, label2];
      }
    }
  }