Я хочу создать линейную диаграмму следующим образом:
Но я не знаю, как добавить градиент к фону. На данный момент у меня есть код для правильного отображения строки. Это код для моей диаграммы:
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 здесь должно помочь. backgroundColor правильно воспринимает различные типы цветов. Вам нужно создать градиент и указать то же самое.
Создали образец фрагмента для повторного использования вашего кода. Следуйте строкам 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/[email protected]"></script>
<canvas id = "myChart"></canvas>
Надеюсь, поможет. Обращайтесь за любыми сомнениями/разъяснениями.