createRadialGradient 带有以气泡图左下角为中心的圆圈

问题描述

我使用 chart.JS 2.0（风险矩阵）创建了一个气泡图。我现在想用一个以图表左下角为中心的绿色圆圈为背景着色，当它扩展到右上角时会变成红色。

我设法在生成以下图表的背景上创建了圆圈：

我现在想让圆圈以左下角为中心，但我正在努力处理坐标。

    Chart.pluginService.register({
      beforeDraw: function(chart,easing) {
        if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
          var helpers = Chart.helpers;
          var ctx = chart.chart.ctx;
          var chartArea = chart.chartArea;
          // {left: 45.073828125,top: 34.4,right: 588,bottom: 538.2}
          ctx.save();
          var canevas = document.querySelector("canvas");
          var contexte = canevas.getContext('2d');
          X = chartArea.right;
          Y = chartArea.bottom;
          leftoffset = chartArea.left;
          topoffset = chartArea.top;

          // var gradient = ctx.createLinearGradient(0,70,0);
          var gradient = ctx.createradialGradient(X / 1.34,Y / 1.412,X / 8,X / 4 * 3,Y / 2,X / 3);

          gradient.addColorStop(0,"green");
          gradient.addColorStop(0.5,"orange");
          gradient.addColorStop(1,"red");
          ctx.fillStyle = gradient;

          ctx.fillRect(chartArea.left,chartArea.top,chartArea.right - chartArea.left,chartArea.bottom - chartArea.top);


        }
      }
    });


    var myBubbleChart = new Chart(document.getElementById("bubble-chart"),{
      type: 'bubble',data: {
        labels: "Africa",datasets: [{
            idu: 29,label: ["Hurricane"],backgroundColor: "#398B93",data: [{
              x: 4,y: 1,r: 15
            }]
          },{
            idu: 30,label: ["Flooding"],data: [{
              x: 5,y: 4,{
            idu: 31,label: ["Cyber-attack"],data: [{
              x: 1,]
      },options: {
        chartArea: {
          backgroundColor: 'linear-gradient(0.25turn,#3f87a6,#ebf8e1,#f69d3c)'
        },title: {
          display: true,text: 'Risk matrix'
        },scales: {
          yAxes: [{
            scaleLabel: {
              display: true,labelString: "Likelihood"
            },ticks: {
              min: 0,// Controls where axis starts
              max: 6,// Controls where axis finishes
              stepSize: 1,display: true,callback: function(tick) {
                return (tick !== 0) && (tick !== 6) ? tick : '';
              }
            },gridLines: {
              display: true,drawBorder: false,linewidth: 1,// Width of line,offsetGridLines: true,color: '#EBEEEE',}
          }],xAxes: [{
            scaleLabel: {
              display: true,labelString: "Impact"
            },color: '#ebeeee',}
          }]
        },legend: {
          display: false,labels: {
            fontColor: 'rgb(255,99,132)'
          }
        },jitter: true,}
    });

#bubble-chart {
  max-width: 90%;
  max-height: 90%;
}

<canvas id="bubble-chart" width="800" height="800"></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

非常感谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bubble-chart javascript