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

How do I place a new line in a label with Chart.js?(如何使用 Chart.js 在标签中放置新行?)

问题描述

我有一个使用 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>

这篇关于如何使用 Chart.js 在标签中放置新行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！