Chart.js и длинные ярлыки

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

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

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

Ответы

Ответ 1

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

Цитируя DOCs: "Использование: если метка является массивом, а не строкой, т.е. [[" June "," 2015"]," July "]], то каждый элемент обрабатывается как отдельная строка."

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

Ответ 2

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

Ответ 4

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

Обходной путь: Удалить метку/текст оси x в файле chart.js

Ответ 5

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

Ответ 6

Чтобы обернуть метку xAxes, поместите следующий код в optoins. (это разделит пробел и обернется на несколько строк)

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