时间戳

首页 > 解决方案 > 图表js的多行标签

javascript - 图表js的多行标签

问题描述

我在 chart.js 中有这个雷达图，它有 5 个标签。标签很长，所以我想在 HTML 中以两行显示它们，但是当我使用“\n”时，它不会换行！

这些是我的标签：

labels: ["COMMUNICATION \n SKILL ", "PRODUCT AND PROCESS \n KNOWLEDGE "]

正如你所看到的，我试图在两行中同时拥有“沟通技巧”和“产品和流程知识”，但它在一行中显示了它们！

正确的方法是什么？

更新

标签在脚本标签中：

var myChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ["COMMUNICATION  SKILL ", "PRODUCT AND PROCESS KNOWLEDGE "],
        datasets: [{
            label: labs,
            data: dps,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
            ],
            borderWidth: 1
        },
    options: {
        maintainAspectRatio: true,
        scale: {
            ticks:{
                beginAtZero: true,
                max: 4
            }
        }
    }
});

标签： javascripthtmlstringchart.jsradar-chart

解决方案

我相信您正在寻找的答案在这里： ChartJS New Lines '\n' in X axis Labels or Displaying More Information around Chart or Tooltip with ChartJS V2

解决方案是将嵌套数组作为输入传递给“标签” - 嵌套数组中的每个元素代表标签中的新文本行。因此，在您的情况下，以下应该有效：

labels: [["COMMUNICATION","SKILL"], ["PRODUCT AND PROCESS","KNOWLEDGE"]]

推荐阅读