如何使用 Chart.js 在標簽中放置新行？

Question

我有一個使用 Chart.js 帶有標簽的數據集。 我想用換行符將標簽分成兩行。

我試過<br />和\\n ，但都不起作用。

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

第一個標簽應該輸出像...

（一種）
醒來

但它最終看起來像......

(A) <br />醒來

(一) 醒來

Answer 1

查看文檔，我可以看到多行標簽是可能的。

更新了文檔鏈接： https : //www.chartjs.org/docs/latest/general/data-structures.html

我查看了一個示例的源代碼，對於多行標簽，它們將每個多行放在一個數組中，其中數組的每個元素都在自己的行中呈現。

例如：

labels: [['(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>