Chart.js и длинные этикетки

Question

Я использую Chart.js для отображения радарной диаграммы. Моя проблема в том, что некоторые ярлыки очень длинные: диаграмма не может быть отображена или она кажется очень маленькой.

Итак, есть ли способ разбить линии или назначить максимальную ширину меток?

Благодарим за помощь!

Answer 1

Вы можете написать яваскрипт функции, чтобы настроить ярлык: // Interpolated JS string - can access value scaleLabel: "<%=value%>",

См http://www.chartjs.org/docs/#getting-started-global-chart-configuration

Answer 2

Кажется, вы могли бы быть на самом деле говорить о ярлыках данных, а не масштабные этикетки. В этом случае вы хотите использовать опцию 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); 

Наконец, вы можете играть с размерами вашего < холста> элемент, как я обнаружил, иногда давая лепестковая диаграмма более высоты помогает автоматическое масштабирование всего.

Answer 3

К сожалению, для этого решения пока нет (5 апреля 2016 года). Есть несколько вопросов по Chart.js, чтобы иметь дело с этим:

• https://github.com/nnnick/Chart.js/issues/358 (главная)
• https://github.com/nnnick/Chart.js/issues/608 (закрыто, не исправить)
• https://github.com/nnnick/Chart.js/issues/358 (закрыто не исправить)
• https://github.com/nnnick/Chart.js/issues/780 (закрытые, без исправления)
• https://github.com/nnnick/Chart.js/issues/752 (закрыто, без исправления)

Это обходной путь: Remove x-axis label/text in chart.js

Answer 4

Для Chart.js 2.0+ вы можете использовать массив в качестве метки:

Цитирования Документов: «Usage: Если метка представляет собой массив, в отличие от строки то есть [[ "Июнь", "2015"], "Июль"], то каждый элемент рассматривается как отдельные линии.»

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

Answer 5

с 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; 
}