1 回答

TA貢獻(xiàn)2041條經(jīng)驗 獲得超4個贊
backgroundColor
使用createLinearGradient應(yīng)該在這里有所幫助。backgroundColor 正確地采用不同類型的顏色。您需要創(chuàng)建一個漸變并指定相同的漸變。
已創(chuàng)建一個示例片段供您重用代碼。遵循第 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>
希望能幫助到你。如有任何疑問/澄清,請回復(fù)。
添加回答
舉報