33

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

那么，有没有办法换行或为标签分配最大宽度？

谢谢您的帮助！

4

7 回答 7

56

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

引用文档：

“用法：如果标签是数组而不是字符串，即 [["June","2015"], "July"]，则每个元素都被视为单独的行。"

var data = {
   labels: [["My", "long", "long", "long", "label"], "another label",...],
   ...
}
于 2016-06-18T16:49:41.313 回答
29

使用 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;
}
于 2016-08-06T17:03:25.563 回答
10

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

scales: {         
  xAxes: [
    {
      ticks: {
        callback: function(label) {
          if (/\s/.test(label)) {
            return label.split(" ");
          }else{
            return label;
          }              
        }
      }
    }
  ]
}
于 2019-10-21T05:52:43.457 回答
2

您可以编写一个javascript函数来自定义标签： // Interpolated JS string - can access value scaleLabel: "<%=value%>",

请参阅http://www.chartjs.org/docs/#getting-started-global-chart-configuration

于 2014-07-10T13:51:45.480 回答
1

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

这是一种解决方法：删除 chart.js 中的 x 轴标签/文本

于 2016-04-06T01:02:54.823 回答
0

看来您实际上可能在谈论数据标签而不是比例标签。在这种情况下，您需要使用该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);

最后，您可能想要使用 <canvas> 元素的尺寸，因为我发现有时给雷达图提供更高的高度有助于自动缩放所有内容。

于 2015-02-14T16:50:57.080 回答
0

我发现在雷达图上操作标签的最佳方法是使用 Chartjs 中的pointlabels 配置。

let skillChartOptions = {
    scale: {
      pointLabels: {
        callback: (label: any) => {
          return label.length > 5 ? label.substr(0, 5) + '...' : label;
        },
      }, ...
    }, ...
}
于 2021-03-19T07:51:17.240 回答