如何使用 Chart.js 在标签中放置新行?

2022-01-22 00:00:00 javascript chart.js chart.js2

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

I have a dataset with labels using Chart.js. I want to separate the label into two lines with a new line character.

<br/> 和 我都试过了，都不行.

I have tried <br /> and , and neither work.

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

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

The first label should output like...

(A)
醒来

但它最终看起来像......

but it ends up looking like...

(A)<br/>醒来

(A) 醒来

推荐答案

查看文档，我可以看到多行标签是可能的.

Looking at the docs, I can see that multiline labels are possible.

更新的文档链接:https://www.chartjs.org/docs/latest/general/data-structures.html

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

I looked at the source code of an example and for multiline labels, they have each multiline in an array where each element of the array is rendered in its own line.

例如:

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

请看下面的演示:

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>

相关文章