我希望每個組欄中的第一項具有相同的漸變
我只能設定第一組的第一項漸變顏色。
注意：我可以實作垂直漸變，但是如何為每個組的第一項提供水平漸變背景漸變
==================================================== ===============================
這是我的代碼
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
// var angle = 45 * Math.PI / 180;
// var x2 = 300 * Math.cos(angle);
// var y2 = 300 * Math.sin(angle);
var background_1 = ctx.createLinearGradient(0, 0, 150, 0);
background_1.addColorStop(0, '#005AB1');
background_1.addColorStop(0.35, '#4F8ED0');
background_1.addColorStop(0.55, '#BED0F9');
background_1.addColorStop(0.70, '#AEC9EF');
background_1.addColorStop(1, '#0069B9');
window.myBar = new Chart(ctx, {
type: "bar",
data: {
labels: [
["????????????????", "?????? ???? ??????", "(n = 475)"],
["????????????????????"," ??????","(n = 325)"],
["??????????????"," ??????","(n = 475)"]
],
datasets: [
{
label: "American Express",
backgroundColor: [background_1, background_1, background_1],
borderColor: "#005AB1",
borderWidth: 1,
borderRadius: 15,
data: [77, 66, 81]
},
{
label: "Mastercard",
backgroundColor: "#DDD2BC",
borderColor: "#DDD2BC",
borderWidth: 1,
borderRadius: 15,
data: [71, 31, 78]
},
{
label: "Paypal",
backgroundColor: "#C1C1C0",
borderColor: "#C1C1C0",
borderWidth: 1,
borderRadius: 15,
data: [50, 38, 71]
}
]
},
options: {
responsive: true,
legend: {
position: "top"
},
title: {
display: true,
text: "Chart.js Bar Chart"
}
},
// plugins: [{
// beforeInit: function(chart) {
// chart.data.labels.forEach(function(e, i, a) {
// if (/\n/.test(e)) {
// a[i] = e.split(/\n/);
// }
// });
// }
// }]
});
};<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
</head>
<body>
<div id="container"
style="width: 100%;">
<canvas id="canvas"></canvas>
</div>
<!-- script -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>uj5u.com熱心網友回復：
您將需要使用可撰寫腳本的函式，在該函式中傳遞正確的開始和結束 x 值：
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: "bar",
data: {
labels: [
["????????????????", "?????? ???? ??????", "(n = 475)"],
["????????????????????", " ??????", "(n = 325)"],
["??????????????", " ??????", "(n = 475)"]
],
datasets: [{
label: "American Express",
backgroundColor: (context) => {
if (!context.element.x || !context.element.width) {
return
}
const {
ctx
} = context.chart;
const background_1 = ctx.createLinearGradient(context.element.x, 0, (context.element.x context.element.width), 0);
background_1.addColorStop(0, '#005AB1');
background_1.addColorStop(0.35, '#4F8ED0');
background_1.addColorStop(0.55, '#BED0F9');
background_1.addColorStop(0.70, '#AEC9EF');
background_1.addColorStop(1, '#0069B9');
return background_1;
},
borderColor: "#005AB1",
borderWidth: 1,
borderRadius: 15,
data: [77, 66, 81]
},
{
label: "Mastercard",
backgroundColor: "#DDD2BC",
borderColor: "#DDD2BC",
borderWidth: 1,
borderRadius: 15,
data: [71, 31, 78]
},
{
label: "Paypal",
backgroundColor: "#C1C1C0",
borderColor: "#C1C1C0",
borderWidth: 1,
borderRadius: 15,
data: [50, 38, 71]
}
]
},
options: {
responsive: true,
legend: {
position: "top"
},
title: {
display: true,
text: "Chart.js Bar Chart"
}
},
// plugins: [{
// beforeInit: function(chart) {
// chart.data.labels.forEach(function(e, i, a) {
// if (/\n/.test(e)) {
// a[i] = e.split(/\n/);
// }
// });
// }
// }]
});
};<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
</head>
<body>
<div id="container" style="width: 100%;">
<canvas id="canvas"></canvas>
</div>
<!-- script -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/482680.html
標籤：javascript 图表 html5-画布 图表.js 条形图