第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Chart.js - 向折線圖背景添加漸變

Chart.js - 向折線圖背景添加漸變

江戶川亂折騰 2024-01-18 15:49:15
我希望創(chuàng)建一個像這樣的折線圖:但我不知道如何將漸變添加到背景。此時我已經(jīng)有了正確顯示該行的代碼。這是我的圖表的代碼:     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      });    }
查看完整描述

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ù)。



查看完整回答
反對 回復(fù) 2024-01-18
  • 1 回答
  • 0 關(guān)注
  • 174 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號