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

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

如何繪制 chartJs 的特定區(qū)域?

如何繪制 chartJs 的特定區(qū)域?

波斯汪 2023-03-03 14:50:06
我有一個如下的折線圖(沒有任何顏色)在這個折線圖中,我想給顏色直到特定的 y 軸值。當它大于 0 時,從那個值到頂部,應該像下面那樣應用漸變 為了實現(xiàn)這一點,下面是我的解決方案 plugins: [        {          beforeRender: function (c, options) {            var dataset = c.data.datasets[0];            var yScale = c.scales['y-axis-0'];            var yPos = yScale.getPixelForValue(0);            let nonZeroPoint;            for (var i = 0; i < dataset.data.length; i++) {              if (dataset.data[i] != 0) {                nonZeroPoint= dataset.data[i];                break;              }            }            const newHeight = (yPos * nonZeroPoint) / Math.max(...dataset.data);            var gradientFill = c.ctx.createLinearGradient(0, yPos-newHeight, 0, 0);            gradientFill.addColorStop(0.1, "#fff");            gradientFill.addColorStop(1, "#7E0100");            var model = c.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].$filler.el._model;            model.backgroundColor = gradientFill;          }        }      ]在此解決方案中,yPos 是圖表的高度。nonZeroPoint是通過for循環(huán)計算出來的一個值,用來標識0之后的第一個數(shù)據值。newHeight = (yPos * nonZeroPoint) / Math.max(...dataset.data);此公式根據頂點高度及其值計算nonZeroHeight 的高度。但是我無法獲得預期的結果。下面是它。我該如何解決?代碼筆: https: //codepen.io/Cicek96/pen/GRZBgpN
查看完整描述

1 回答

?
一只斗牛犬

TA貢獻1784條經驗 獲得超2個贊

使用Plugin Core APIafterLayout中的鉤子,這可以寫成如下:

new Chart("chart", {

  type: 'line',

  plugins: [{

    afterLayout: c => {

      let dataset = c.data.datasets[0];

      let yScale = c.scales['y-axis-0'];

      let yBottom = yScale.getPixelForValue(0);

      let yGradientStart = yScale.getPixelForValue(dataset.data.find(v => v > 0));

      let yTop = yScale.getPixelForValue(Math.max(...dataset.data));

      let gradientFill = c.ctx.createLinearGradient(0, yBottom, 0, yTop);

      gradientFill.addColorStop(0, "#fff");

      let offset = (yBottom - yGradientStart) / (yBottom - yTop); 

      gradientFill.addColorStop(offset, "#fff");

      gradientFill.addColorStop(1, "#7E0100");

      dataset.backgroundColor = gradientFill;

    }

  }],

  data: {

    labels: ["January", "February", "March", "April", "May", "June", "July"],

    datasets: [{

      label: "My First dataset",

      borderColor: '#7E0100',

      data: [0, 120, 200, 350, 200, 120, 0]

    }]

  },

  options: {

    scales: {

      yAxes: [{

        ticks: {

          max: 500,

          stepSize: 100

        }

      }]

    }

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

<canvas id="chart" height="160"></canvas>


查看完整回答
反對 回復 2023-03-03
  • 1 回答
  • 0 關注
  • 150 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號