Charts Chart.js和长标签

我使用Chart.js显示雷达图。我的问题是有些标签很长： 图表无法显示或看起来很小

那么，有没有一种方法可以打断线条或为标签指定最大宽度

---

谢谢你的帮助

您可以编写javascript函数来自定义标签：

//插入JS字符串-可以访问值
scaleLabel:“”，

---

请参见

您可能实际上在谈论数据标签，而不是比例标签。在这种情况下，您需要使用

pointLabelFontSize

选项。请参见以下示例：

var ctx = $("#myChart").get(0).getContext("2d");

var data = {
  labels: ["Eating", "Sleeping", "Coding"],
  datasets: [
    {
        label: "First",
        strokeColor: "#f00",
        pointColor: "#f00",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "#ccc",
        data: [45, 59, 90]
    },
    {
        label: "Second",
        strokeColor: "#00f",
        pointColor: "#00f",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "#ccc",
        data: [68, 48, 40]
    }
  ]
};

// This is the important part
var options = {
  pointLabelFontSize : 20
};

var myRadarChart = new Chart(ctx).Radar(data, options);

---

最后，您可能希望使用元素的尺寸，因为我发现有时赋予雷达图更高的高度有助于自动缩放所有内容。

不幸的是，直到现在（2016年4月5日）还没有解决方案。 Chart.js上有多个问题需要解决：

• （主要部分）
• （已关闭，无需修复）
• （已关闭，无需修复）
• （已关闭，无需修复）
• （已关闭，无需修复）

---

这是一个解决方法：

对于Chart.js 2.0+您可以使用数组作为标签：

引用文件：

用法：如果标签是一个数组而不是字符串，即[June]、[2015]、“July”]，则每个元素都被视为一条单独的线

---

使用ChartJS 2.1.6和@ArivanBastos

只需将长标签传递给以下函数，它将以数组形式返回标签，每个元素都与指定的maxWidth有关

/* takes a string phrase and breaks it into separate phrases 
   no bigger than 'maxwidth', breaks are made at complete words.*/

function formatLabel(str, maxwidth){
    var sections = [];
    var words = str.split(" ");
    var temp = "";

    words.forEach(function(item, index){
        if(temp.length > 0)
        {
            var concat = temp + ' ' + item;

            if(concat.length > maxwidth){
                sections.push(temp);
                temp = "";
            }
            else{
                if(index == (words.length-1))
                {
                    sections.push(concat);
                    return;
                }
                else{
                    temp = concat;
                    return;
                }
            }
        }

        if(index == (words.length-1))
        {
            sections.push(item);
            return;
        }

        if(item.length < maxwidth) {
            temp = item;
        }
        else {
            sections.push(item);
        }

    });

    return sections;
}

/*接受一个字符串短语并将其拆分为单独的短语
不大于“maxwidth”，在完整单词处进行换行*/
函数formatLabel（str，maxwidth）{
var部分=[]；
var words=str.split（“”）；
var temp=“”；
words.forEach（功能（项目、索引）{
如果（温度长度>0）
{
var concat=温度+“”+项目；
如果（concat.length>maxwidth）{
部分。推送（温度）；
温度=”；
}
否则{
如果（索引==（单词长度-1））
{
部分。推（concat）；
返回；
}
否则{
温度=concat；
返回；
}
}
}
如果（索引==（单词长度-1））
{
部分。推送（项目）；
返回；
}
如果（项目长度<最大宽度）{
温度=项目；
}
否则{
部分。推送（项目）；
}
});
回流段；
}

要包装xAxes标签，请将以下代码放入optoins中。（这将从空白处拆分并换行为多行）

---

我发现操纵雷达图上标签的最好方法是使用

---

请提供您的代码。@Yeats-上述解决方案在v2.3（垂直条形图、x轴刻度标签）中有效。所以，重新检查你的代码，而不是亵渎阿里万，这也许不优雅，但仍然是功能性的解决方案？我找不到任何明确提到这一点在文档本身，但有一个例子在网站上。它似乎也不工作的雷达图作为OP的要求：花了整整两天的时间试图解决一个问题和解决问题这个答案解决了问题，你就是那个人。：）这仅适用于x轴。有关于y轴的提示吗？真的很好！感谢您Fermin+1卓越，将其添加到项目、核心或顺便说一句，

maxwidth

指的是字符，而不是像素或任何其他字符measurements@fermin这可以很好地工作，但它也会在工具提示中添加换行符。。。不太理想。它可以工作，使用这个基于正则表达式的包装而不是破坏标签。很好。非常棒，当动态更改图表并重新渲染它们时，非常有效，谢谢。当此技术用于y轴时，高度不会自动调整。这篇课文是相互重叠的

/* takes a string phrase and breaks it into separate phrases 
   no bigger than 'maxwidth', breaks are made at complete words.*/

function formatLabel(str, maxwidth){
    var sections = [];
    var words = str.split(" ");
    var temp = "";

    words.forEach(function(item, index){
        if(temp.length > 0)
        {
            var concat = temp + ' ' + item;

            if(concat.length > maxwidth){
                sections.push(temp);
                temp = "";
            }
            else{
                if(index == (words.length-1))
                {
                    sections.push(concat);
                    return;
                }
                else{
                    temp = concat;
                    return;
                }
            }
        }

        if(index == (words.length-1))
        {
            sections.push(item);
            return;
        }

        if(item.length < maxwidth) {
            temp = item;
        }
        else {
            sections.push(item);
        }

    });

    return sections;
}

scales: {         
  xAxes: [
    {
      ticks: {
        callback: function(label) {
          if (/\s/.test(label)) {
            return label.split(" ");
          }else{
            return label;
          }              
        }
      }
    }
  ]
}

let skillChartOptions = {
    scale: {
      pointLabels: {
        callback: (label: any) => {
          return label.length > 5 ? label.substr(0, 5) + '...' : label;
        },
      }, ...
    }, ...
}