我正在使用 chart.js 庫制作折線圖，在這里我想將線條的顏色更改為漸變色。
我試過的代碼，
const gradientFill = ctx.createLinearGradient(500, 0, 100, 0);
gradientFill.addColorStop(0, "#80b6f4");
gradientFill.addColorStop(1, "#f49080");
并將其添加到資料集中，例如，
datasets: [
{
.
.
.
.
backgroundColor: gradientFill,
.
.
}
]
但是我看不到變化，仍然只顯示一些灰色線條而不是漸變。
作業示例：
編輯：嘗試添加，borderColor : gradientFill但這也不起作用。
要求：要求是我需要有一個類似于https://i.stack.imgur.com/lKGqT.png的漸變線
請幫我將顏色更改為漸變色。
uj5u.com熱心網友回復：
由于您的useEffect鉤子，您的漸變不適用，在此鉤子中，您使用formatData函式再次設定資料，但只傳遞資料而沒有 canvasGradient。所以你也需要通過它。
請參閱第 108 行和第 109 行注釋掉它作業正常，因此您需要在那里重新創建漸變或在更高級別創建它，以便您只創建一次。 https://codesandbox.io/s/chart-js-react-typescript-forked-dxlj7?file=/src/App.tsx
編輯：
更新為不同的方法，在您formatData的 backgroundColor 函式中，如果不采用當前 backgroundColor，請使用三元運算子檢查是否給出畫布漸變
uj5u.com熱心網友回復：
您可以borderColor : 'Red'在資料集中使用。看下面的代碼
datasets: [
{
pointBorderWidth: 10,
pointHoverRadius: 10,
pointHoverBorderWidth: 1,
pointRadius: 3,
fill: "start",
backgroundColor: gradientFill,
borderWidth: 4,
borderColor : 'Red', // New line added
data
}
]
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/392703.html
標籤：javascript css 反应 打字稿 图表.js
上一篇：如何避免在Typescript中丟失此背景關系中的物件？
下一篇：如何創建通用物體訂閱者