[英]Chart.js Text color
So im using chart.js http://www.chartjs.org/docs/ and i cant change the color of the text in the bottom所以我使用chart.js http://www.chartjs.org/docs/我不能改变底部文本的颜色
ex: "January","February","March","April","May","June","July" and the numbers in the left side例如:“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”以及左侧的数字
i tried all these options: scaleFontColor: "#FFFFFF" pointLabelFontColor : "#FFFFFF"我尝试了所有这些选项: scaleFontColor: "#FFFFFF" pointLabelFontColor : "#FFFFFF"
my full code:我的完整代码:
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My Second dataset",
fillColor : "rgba(255, 89, 114, 0.6)",
strokeColor : "rgba(51, 51, 51, 1)",
pointColor : "rgba(255, 89, 114, 1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
maintainAspectRatio: false,
scaleFontColor: "#FFFFFF",
pointLabelFontColor : "#FFFFFF",
pointLabelFontSize : 30,
data : [1,2,10,7,3,1]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}
</script>
The working code is this:工作代码是这样的:
Chart.defaults.global.defaultFontColor = "#fff";
Have fun :)玩得开心 :)
scaleFontColor
is used to change the color of the labels. scaleFontColor
用于更改标签的颜色。
Instead of putting it in your datasets you should add it as a parameter in your function, like this:您应该将其作为参数添加到函数中,而不是将其放入数据集中,如下所示:
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true, scaleFontColor: "#FFFFFF" }
});
在 Chart.js v3 中,它可以通过以下方式实现:
Chart.defaults.color = "#ff0000";
For chart.js 3.x migration, text-labels on x and y axis are set this way:对于 chart.js 3.x 迁移,x 和 y 轴上的文本标签设置如下:
Set options to the following:将选项设置为以下内容:
scales: {
x: {
ticks: {
color: "red"
}
},
y: {
ticks: {
color: "green"
}
}
}
similar solution is found if you want to change color of grid lines, inside of x / y value write如果要更改网格线的颜色,在 x / y 值写入内部找到类似的解决方案
grid: {
color: "white"
}
i found the issue together with Kenan我和凯南一起发现了这个问题
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My Second dataset",
fillColor : "rgba(255, 89, 114, 0.6)",
strokeColor : "rgba(51, 51, 51, 1)",
pointColor : "rgba(255, 89, 114, 1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
maintainAspectRatio: false,
data : [1,2,10,7,3,1]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true, scaleFontColor: "#FFFFFF" }
)};
</script>
it wasnt a normal datatype and i had to adjust the brackets properly!它不是正常的数据类型,我必须正确调整括号!
thanks alot,looks great now.非常感谢,现在看起来很棒。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.