Chart.js 标签颜色

我正在使用 chart.js 创建一个条形图，但似乎不能更改标签颜色或图例颜色。我想出了如何改变刻度的颜色，但是我不知道该把‘ scaleFontColor’放在哪里，如果这确实是我需要使用的。

这里有一个链接，它现在看起来是什么样子。 Http://imgur.com/nxah1mk

我的原则是:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
scaleFontColor: "white",
type: "bar",
data: {
labels: <?php echo json_encode($timeSlice); ?>,
datasets: [{
label: "A Label",
backgroundColor: "rgba(159,170,174,0.8)",
borderWidth: 1,
hoverBackgroundColor: "rgba(232,105,90,0.8)",
hoverBorderColor: "orange",
scaleStepWidth: 1,
data: <?php echo json_encode($myCount); ?>
}]
},
options: {
legend: {
fontColor: "white"
},
scales: {
yAxes: [{
ticks: {
fontColor: "white",
stepSize: 1,
beginAtZero: true
}
}]
}
}
});

如果你能帮忙，我将不胜感激。

124053 次浏览
小开
最佳答案

我解决了，抱歉问了这个问题。但是我想我会留下一个答案，以防其他人遇到我的问题。

var ctx = document.getElementById("barChart");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["label 1", "label 2"],
datasets: [{
label: "My Label",
backgroundColor: "rgba(159,170,174,0.8)",
borderWidth: 1,
hoverBackgroundColor: "rgba(232,105,90,0.8)",
hoverBorderColor: "orange",
scaleStepWidth: 1,
data: [4, 5]
}]
},
options: {
legend: {
labels: {
fontColor: "blue",
fontSize: 18
}
},
scales: {
yAxes: [{
ticks: {
fontColor: "green",
fontSize: 18,
stepSize: 1,
beginAtZero: true
}
}],
xAxes: [{
ticks: {
fontColor: "purple",
fontSize: 14,
stepSize: 1,
beginAtZero: true
}
}]
}
}
});
   <!-- Edit:
chart.js recently released new version v3.x
which is not backwards compatible with v2.x
-->


<!--<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>-->


<!-- above link gets you latest version of chart.js (at v3.3.2 now)
hence snippet didn't work propperly anymore :-(
-->


<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4"></script>


<!-- above link gets you v2.9.4
and snippet works agian  :-)
-->


<div>
<canvas id="barChart" height="140"></canvas>
</div>

小开

好问题和好答案来自@PhantomSalt

他的回答和... ... ... ... ... ... ... ... ... ... ... ... ... ... chart.js V2.xx完全吻合
我修改了他的好代码来处理. . chart.js < strong > v3.xx

(V3.xx与 V2.xx不向后兼容)

// var ctx = document.getElementById("barChart")
const ctx = document.getElementById("barChart").getContext("2d"); // added '.getContext("2d")'


const myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["label 1", "label 2"],
datasets: [{
label: "My Label",
backgroundColor: "rgba(159,170,174,0.8)",
borderWidth: 1,
hoverBackgroundColor: "rgba(232,105,90,0.8)",
hoverBorderColor: "orange",
scaleStepWidth: 1,
data: [4, 5]
}]
},
options: {
plugins: {  // 'legend' now within object 'plugins {}'
legend: {
labels: {
color: "blue",  // not 'fontColor:' anymore
// fontSize: 18  // not 'fontSize:' anymore
font: {
size: 18 // 'size' now within object 'font {}'
}
}
}
},
scales: {
y: {  // not 'yAxes: [{' anymore (not an array anymore)
ticks: {
color: "green", // not 'fontColor:' anymore
// fontSize: 18,
font: {
size: 18, // 'size' now within object 'font {}'
},
stepSize: 1,
beginAtZero: true
}
},
x: {  // not 'xAxes: [{' anymore (not an array anymore)
ticks: {
color: "purple",  // not 'fontColor:' anymore
//fontSize: 14,
font: {
size: 14 // 'size' now within object 'font {}'
},
stepSize: 1,
beginAtZero: true
}
}
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- gets you the latest version of Chart.js, now at v3.3.2 -->


<div>
<canvas id="barChart" height="140"></canvas>
</div>


提交答案