回答
您可以编写JavaScript功能自定义标签: // Interpolated JS string - can access value scaleLabel: "<%=value%>",
见http://www.chartjs.org/docs/#getting-started-global-chart-configuration
看来你可能实际上是在谈论数据标签,而不是规模的标签。在这种情况下,您需要使用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);
最后你可能要与您的<画布的尺寸打>元素我发现有时给雷达图更高度有助于一切的自动缩放。
不幸的是,直到现在(2016年4月5日)还没有解决方案。 上有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
对于chart.js之2.0+,您可以使用数组作为标签:
引用文档: “用法:如果一个标签,而不是一个字符串数组即[[ “六月”, “2015”], “月”]然后每个元素被视为一个单独的线。”
var data = {
labels: [["My", "long", "long", "long", "label"], "another label",...],
...
}
不是最干净的解决方案,但它为我工作。 –
@Yeats - 上述解决方案适用于v2.3(垂直条形图,x轴刻度标签)。那么如何重新检查你的代码,而不是亵渎Arivan,这可能不是优雅的,但仍然功能的解决方案? – Ross
随着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;
}
真的很好!谢谢Fermin +1 – NickyTheWrench
优秀,将它添加到项目中,核心或[插件](http://www.chartjs.org/docs/latest/developers/plugins.html) –
顺便说一句,它也应该清楚,最大宽度“指字符而不是像素或任何其他测量 –
- 1. Chart.js标签值
- 2. Chart.js标签颜色
- 3. Chart.js标签过滤
- 4. Chart.js更改标签颜色
- 5. 自定义标签Chart.js
- 6. Chart.js数据/标签刻度
- 7. Chart.js标签中的HTML
- 8. 缩进标签和复选框,与标签和长标签
- 9. Chart.js轴标签字体大小
- 10. Chart.js全局格式化数字标签
- 11. 在chart.js中显示最大标签
- 12. Chart.js V2格式化/样式标签
- 13. Chart.js - 在水平条内写入标签?
- 14. Chart.js - y轴自定义标签
- 15. chart.js更改雷达图标签大小
- 16. Chart.js - 定位甜甜圈标签
- 17. Chart.js在饼图上显示标签
- 18. Chart.js - 折线图工具提示标签
- 19. Chart.js - 绘制多条标签条形图
- 20. 添加链接到X标签Chart.js
- 21. chart.js:设置垂直标签方向
- 22. chart.js之V2隐藏数据集标签
- 23. 如何反转chart.js标签顺序?
- 24. Chart.js中的水平xAxis标签
- 25. chart.js响应条形图标签大小
- 26. 如何缩短chart.js之标签
- 27. Chart.js同一标签的多列数据
- 28. 更改Chart.js打勾标签的位置
- 29. chart.js之:饼图外显示标签
- 30. HTML标签能够在chart.js之默认提示标签
请提供您的代码。 –