如何在带有 Chart.js 的标签中放置一个新行？

Question

我有一个使用 Chart.js 标签的数据集。我想用换行符将标签分成两行。

我已经尝试了 <br /> 和 \n，但都没有用。

labels: ['(A)<br />Waking', '(B)', '(C)', '(D)'],
labels: ['(A)\nWaking', '(B)', '(C)', '(D)'],

第一个标签应该输出像...

(A)
Waking

但最终看起来像...

(A)<br />Waking

(A) Waking

Answer 1

查看文档，我发现可以使用多行标签。

已更新 link 文档：https://www.chartjs.org/docs/latest/general/data-structures.html

我查看了一个示例的源代码，对于多行标签，它们在一个数组中有每个多行，其中数组的每个元素都在其自己的行中呈现。

例如：

labels: [['(A)', 'Waking'], '(B)', '(C)', '(D)'],

看下面的DEMO:

var randomScalingFactor = function() {
  return Math.round(Math.random() * 100);
};

window.chartColors = {
    red: 'rgb(255, 99, 132)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgb(201, 203, 207)'
};

var config = {
  type: 'line',
  data: {
    labels: [
      ['(A)', 'Walking'], '(B)', '(C)', '(D)'],
    datasets: [{
      label: 'My First dataset',
      fill: false,
      backgroundColor: window.chartColors.red,
      borderColor: window.chartColors.red,
      data: [
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor()        
      ]
    }, {
      label: 'My Second dataset',
      fill: false,
      backgroundColor: window.chartColors.blue,
      borderColor: window.chartColors.blue,
      data: [
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor()
      ],
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart with Multiline Labels'
    },
  }
};

window.onload = function() {
  var ctx = document.getElementById('canvas').getContext('2d');
  window.myLine = new Chart(ctx, config);
};

<script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/a2bd7673/cloudflare-static/rocket-loader.min.js" data-cf-settings="100752039a7e60f6a2c8f47d-|49"></script>

<div style="width:90%;">
  <canvas id="canvas"></canvas>
</div>

如何在带有 Chart.js 的标签中放置一个新行？

How do I place a new line in a label with Chart.js?

javascript

chart.js

chart.js2