它創建一個水平延伸的條形圖。
巴赫和莫扎特等標簽的字體很小，我想增加它。你能告訴我如何改變標簽的字體大小嗎？
<div class="chartWrap">
<canvas id="chart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const labels = ["Bach", "Mozart", "Ravel", "Chopin", "Beethoven"];
const data = {
labels: labels,
datasets: [
{
data: [9, 10, 7, 8, 8],
backgroundColor: "rgba(0, 0, 0, 0.5)"
}
]
};
const options = {
responsive: true,
indexAxis: "y",
plugins: {
legend: {
display: false
}
}
};
const config = {
type: "bar",
data: data,
options: options
};
const ctx = document.getElementById("chart").getContext("2d");
new Chart(ctx, config);
</script>
看了很多Chart.js的例子，我知道應該在.js中指定字體大小options > scales，但我不知道在scales下輸入什么。
條形圖 | 圖表.js
uj5u.com熱心網友回復：
將此添加到選項中。
scales: {
y: {
ticks: {
font: {
size: 30,
}
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div class="chartWrap">
<canvas id="chart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const labels = ["Bach", "Mozart", "Ravel", "Chopin", "Beethoven"];
const data = {
labels: labels,
datasets: [{
data: [9, 10, 7, 8, 8],
backgroundColor: "rgba(0, 0, 0, 0.5)"
}]
};
const options = {
responsive: true,
indexAxis: "y",
plugins: {
legend: {
display: false
}
},
scales: {
y: {
ticks: {
font: {
size: 30,
}
}
}
}
};
const config = {
type: "bar",
data: data,
options: options
};
const ctx = document.getElementById("chart").getContext("2d");
new Chart(ctx, config);
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/355738.html
標籤：javascript html 图表 图表.js
上一篇：比較兩個上傳的json檔案