Я использую Chart.js для отображения радарной диаграммы. Моя проблема в том, что некоторые ярлыки очень длинные: диаграмма не может отображаться или она кажется очень маленькой.
Итак, есть ли способ разбить строки или назначить максимальную ширину меток?
Благодарим за помощь!
Для Chart.js 2. 0+ вы можете использовать массив в качестве метки:
Цитируя DOCs: "Использование: если метка является массивом, а не строкой, т.е. [[" June "," 2015"]," July "]], то каждый элемент обрабатывается как отдельная строка."
var data = {
labels: [["My", "long", "long", "long", "label"], "another label",...],
...
}
С 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;
}
Вы можете написать функцию javascript для настройки метки:
// Interpolated JS string - can access value
scaleLabel: "<%=value%>",
См. http://www.chartjs.org/docs/#getting-started-global-chart-configuration
К сожалению, до сих пор нет решения для этого (5 апреля 2016 года). На Chart.js есть несколько проблем:
Обходной путь: Удалить метку/текст оси x в файле chart.js
Кажется, вы действительно говорите о метках данных, а не о метках шкалы. В этом случае вы хотите использовать опцию 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> , как я обнаружил, иногда придание радарной диаграмме большей высоты помогает автоматически масштабировать все.
Чтобы обернуть метку xAxes, поместите следующий код в optoins. (это разделит пробел и обернется на несколько строк)
scales: {
xAxes: [
{
ticks: {
callback: function(label) {
if (/\s/.test(label)) {
return label.split(" ");
}else{
return label;
}
}
}
}
]
}