Chart.jsを使用してレーダーチャートを表示します。私の問題は、一部のラベルが非常に長いことです。チャートを表示できないか、非常に小さいように見えます。
だから、行を分割する方法やラベルに最大幅を割り当てる方法はありますか?
ご協力ありがとうございました!
Chart.js 2.0以降では、ラベルとして配列を使用できます。
DOCの引用:"使用法:ラベルが文字列ではなく配列である場合、つまり[[" 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 を参照してください
残念ながら、これまでのところこれに対する解決策はありません(2016年4月5日)。 Chart.jsには、これに対処するための複数の問題があります。
これは回避策です: chart.jsのx軸ラベル/テキストを削除
実際にはスケールラベルではなく、データラベルについて話しているようです。この場合、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>要素の寸法を試してみることをお勧めします。