我正在使用圖表 js 3 繪制雷達圖。
我從后端獲取標簽文本。
我正在嘗試使標簽具有回應性并應用多行和換行詞。
我目前的配置是：
const myChart = new Chart(ctx, {
type: "radar",
data: {
labels: labels,
datasets: [
...
我添加了一系列選項來使圖形回應并提供自定義樣式：
options: {
scales: {
r: {
pointLabels: {
font: {
fontSize: 14,
fontFamily: "Roboto",
},
},
},
},
maintainAspectRatio: false,
responsive: true,
layout: {
padding: 0,
},
tooltips: {
enabled: false,
},
plugins: {
title: {
display: false,
text: "Les évaluations",
},
legend: {
display: false,
},
},
},
我得到這個圖：
我找不到啟用多行標簽或對文本應用換行的選項
uj5u.com熱心網友回復：
您可以將 定義labels為字串陣列的陣列。
這在資料結構下的 Chart.js 檔案中描述如下：“如果您需要多行標簽，您可以提供一個陣列，每行作為陣列中的一個條目。”
請查看下面的可運行代碼片段，看看它是如何作業的。
new Chart('myChart', {
type: 'radar',
data: {
labels: [['Deep', 'Red'], ['Nice', 'Blue'], ['Cute', 'Yellow']],
datasets: [{
label: 'My Dataset',
data: [300, 250, 280],
borderColor: '#FF6384'
}]
},
options: {
responsive: false
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>uj5u.com熱心網友回復：
實際上，您的變數labels是以這種方式包含字串的陣列：["Je note la qualité du pitch...", "Je donne ma voix pour sélectionner cette startup, sous réserve"]
您需要做的是制作一個包含相同句子的二維陣列，但將其拆分為子陣列，如下所示： [["Je note la qualité", "du pitch..."], ["Je donne ma voix", "pour sélectionner", "cette startup, sous réserve"]]
通過這樣做，您應該有多行句子，將您的字串分成多個字串（塊），這是一個快速實作：
const newLabels = labels.map(l => l.match(/.{1,n}/g))其中 n 是您每行的最大長度。
如果您想按字數拆分字串，請嘗試以下分塊實作：
const splitString = (text, chunkSize) => {
const arr = text.split(" ")
const output = []
for (let i = 0, length = arr.length; i < length; i = chunkSize) {
output.push(arr.slice(i, i chunkSize))
}
return output
}
console.log(splitString("Hi this is a sample string that I would like to break down into an array!", 3))
你應該得到這個：
[
[ 'Hi', 'this', 'is' ],
[ 'a', 'sample', 'string' ],
[ 'that', 'I', 'would' ],
[ 'like', 'to', 'break' ],
[ 'down', 'into', 'an' ],
[ 'array!' ]
]
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/400848.html
標籤：javascript 网络包 图表.js 雷达图