Chart.js和长标签

hyrbngr7  于 2022-11-06  发布在  Chart.js
关注(0)|答案(9)|浏览(302)

我使用Chart.js来显示雷达图。我的问题是有些标签很长:无法显示图表或图表显得非常小。
那么,有没有办法打断行或为标签指定最大宽度呢?
谢谢你的帮助!

zynd9foi

zynd9foi1#

对于Chart.js 2.0+,您可以使用数组作为标签:
引用DOC:
“用法:如果标签是数组而不是字符串,例如[[“June”,“2015”],“July”],则每个元素都被视为单独的行。”

var data = {
   labels: [["My", "long", "long", "long", "label"], "another label",...],
   ...
}
laik7k3q

laik7k3q2#

使用ChartJS 2.1.6并使用@ArivanBastos answer
只要将你的长标签传递给下面的函数,它就会以数组的形式返回你的标签,每个元素都与你指定的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;
}

console.log(formatLabel("This string is a bit on the longer side, and contains the long word Supercalifragilisticexpialidocious for good measure.", 10))
5hcedyr0

5hcedyr03#

要使xAxes标签换行,请将以下代码放入optoin中。(这将从白色中拆分并换行到多行中)

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

zaqlnxep4#

您可以编写一个javascript函数来自定义标签:// Interpolated JS string - can access value scaleLabel: "<%=value%>",
请访问http://www.chartjs.org/docs/#getting-started-global-chart-configuration

c9x0cxw0

c9x0cxw05#

遗憾的是,直到现在(2016年4月5日)还没有解决方案。Chart.js上有多个问题可以解决这个问题:

这是一个解决方法:删除chart.js中的X轴标签/文本

ql3eal8s

ql3eal8s6#

看起来您实际上是在谈论数据标签而不是刻度标签。在这种情况下,您需要使用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 >,因为我发现有时给雷达图更高的高度有助于自动缩放一切。

yqhsw0fo

yqhsw0fo7#

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

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

lf5gs5x28#

我想用一个可读性更强的版本来进一步扩展Fermin的答案。如前所述,可以给予Chart.js一个字符串数组,使其换行。为了从一个更长的字符串中生成这个字符串数组,我建议使用以下函数:
第一个

wgmfuz8q

wgmfuz8q9#

对于大多数最新版本的chart.js,标签可以用数组的数组来表示,也就是说,标签可以是:

labels = [['a', 'label1'],['the', 'lable2'],label3] '$'

如果标签包含多个单词,您可以使用以下快速且兼容所有版本的函数将标签数组转换为数组的数组:

function splitLongLabels(labels){
    //labels = ["ABC PQR", "XYZ"];  
    var i = 0, len = labels.length;
    var splitlabels = labels;
    while (i < len) {
        var words = labels[i].trim().split(' ');
        if(words.length>1){
      for(var j=0; j<words.length; j++){
      }
      splitlabels[i] = words;
        }   
        i++
        }

    return splitlabels;
}

相关问题