Chart.js - 向折线图背景添加渐变
Chart.js - Add gradient to line chart background
我希望创建这样的折线图:
但是我不知道如何给背景添加渐变。此时我有了正确显示该行的代码。这是我的图表的代码:
const ctx = document.getElementById("myChart");
var speedData = {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
datasets: [
{
label: "Car Speed",
data: this.car.energyConsumption,
lineTension: 0,
pointBackgroundColor: "#131921",
pointBorderColor: "white",
pointBorderWidth: 3,
pointRadius: 6,
borderColor: "white"
}
]
};
var chartOptions = {
legend: {
display: false
}
};
new Chart(ctx, {
type: "line",
data: speedData,
options: chartOptions
});
}
backgroundColor
与 createLinearGradient should help here. backgroundColor propertly takes in different types of colors。您需要创建一个渐变并指定相同的渐变。
已为您重用代码创建了示例代码段。按照第 4-7 行和第 34 行。
const ctx = document.getElementById("myChart");
// Create gradient here
const ctxForGradient = document.getElementById('myChart').getContext('2d');
const gradientFill = ctxForGradient.createLinearGradient(0, 500, 0, 50);
gradientFill.addColorStop(0, "rgba(255, 0, 0, 0.9)");
gradientFill.addColorStop(1, "rgba(0, 0, 255, 0.9)");
var speedData = {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
datasets: [{
label: "Car Speed",
data: [7, 9, 5, 8, 9, 7, 6, 10, 4, 5, 7, 8, 9],
lineTension: 0,
pointBackgroundColor: "#131921",
pointBorderColor: "white",
pointBorderWidth: 3,
pointRadius: 6,
borderColor: "white",
backgroundColor: gradientFill // Fill gradient here
}]
};
var chartOptions = {
legend: {
display: false
}
};
new Chart(ctx, {
type: "line",
data: speedData,
options: chartOptions
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart"></canvas>
希望对您有所帮助。恢复任何 doubts/clarification.
我希望创建这样的折线图:
但是我不知道如何给背景添加渐变。此时我有了正确显示该行的代码。这是我的图表的代码:
const ctx = document.getElementById("myChart");
var speedData = {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
datasets: [
{
label: "Car Speed",
data: this.car.energyConsumption,
lineTension: 0,
pointBackgroundColor: "#131921",
pointBorderColor: "white",
pointBorderWidth: 3,
pointRadius: 6,
borderColor: "white"
}
]
};
var chartOptions = {
legend: {
display: false
}
};
new Chart(ctx, {
type: "line",
data: speedData,
options: chartOptions
});
}
backgroundColor
与 createLinearGradient should help here. backgroundColor propertly takes in different types of colors。您需要创建一个渐变并指定相同的渐变。
已为您重用代码创建了示例代码段。按照第 4-7 行和第 34 行。
const ctx = document.getElementById("myChart");
// Create gradient here
const ctxForGradient = document.getElementById('myChart').getContext('2d');
const gradientFill = ctxForGradient.createLinearGradient(0, 500, 0, 50);
gradientFill.addColorStop(0, "rgba(255, 0, 0, 0.9)");
gradientFill.addColorStop(1, "rgba(0, 0, 255, 0.9)");
var speedData = {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
datasets: [{
label: "Car Speed",
data: [7, 9, 5, 8, 9, 7, 6, 10, 4, 5, 7, 8, 9],
lineTension: 0,
pointBackgroundColor: "#131921",
pointBorderColor: "white",
pointBorderWidth: 3,
pointRadius: 6,
borderColor: "white",
backgroundColor: gradientFill // Fill gradient here
}]
};
var chartOptions = {
legend: {
display: false
}
};
new Chart(ctx, {
type: "line",
data: speedData,
options: chartOptions
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart"></canvas>
希望对您有所帮助。恢复任何 doubts/clarification.