可以填充雷达图轴的背景吗？

Question

我可以像下图一样填充雷达图的背景吗？

我正在使用 Chart.js 版本 3.9。

我的代码现在看起来像这样：

   this.chart = new Chart(spiderChart as ChartItem, {
      type: 'radar',
      data: this.data,
      options: {
        scales: {
          r: {
            ticks: {
              backdropColor: 'rgba(0,0,0,0.01)',
            },
            angleLines: {
              display: true,
              color: 'rgba(255,255,255,0.1)',
            },
            grid: {
              circular: true,
              color: 'rgba(255,255,255,0.1)',
            },
            suggestedMin: 0,
            suggestedMax: 4,
          },
        },
        responsive: true,
        elements: {
          line: {
            borderWidth: 1,
            borderJoinStyle: 'round',
            borderCapStyle: 'round',
          },
          point: {
            pointStyle: 'circle',
            borderColor: 'rgba(255,255,255,0.1)',
          },
        },
      },
    });

我想为轴的背景着色（而不是轴本身）。

Answer 1

这可以通过在画布上的

conic gradient

中应用

background-image

来完成，以看不到渐变效果的方式（这可以通过在两个组中使用相同的角度值来完成）。

例如线性渐变

.linear-gradient{
width: 300px; 
height: 100px;
background: linear-gradient(to right, #32ff7a 0%,#32ff7a 33%,#ff0004 33%,#ff0004 66%, #ff32E0 66%, #ff32E0 100%);
}


.conic-gradient{
    width: 400px; 
    height: 400px; 
    background-repeat: no-repeat;
    background-position: center center;
    background-image: conic-gradient(from 25.715deg, 
                        rgba(255, 0, 0, 0.44) 0deg,
                        rgba(255, 0, 0, 0.44) 51.43deg,
                        rgba(255, 255, 0, 0.44) 51.43deg,   
                        rgba(255, 255, 0, 0.44) 102.86deg,
                        rgba(0, 128, 0, 0.44) 102.86deg,
                        rgba(0, 128, 0, 0.44) 154.29deg, 
                        rgba(0, 0, 255, 0.44) 154.29deg,
                        rgba(0, 0, 255, 0.44) 205.72deg, 
                        rgba(165, 42, 42, 0.44) 205.72deg,
                        rgba(165, 42, 42, 0.44) 257.15deg, 
                        rgba(128, 0, 128, 0.44) 257.15deg, 
                        rgba(128, 0, 128, 0.44) 308.58deg, 
                        rgba(128, 128, 128, 0.44) 308.58deg,
                        rgba(128, 128, 128, 0.44) 360.01deg);
   
     clip-path: polygon(
      49% 0,
      90% 20%,
      100% 60%,
      75% 100%,
      25% 100%,
      0% 60%,
      10% 20%
    );
}

<div class="linear-gradient"></div>

<div class="conic-gradient"></div>

如上例中的 (#32ff7a 33%,#ff0004 33%) 和 (#ff0004 66%, #FF32E0 66%)，角度值相同，因此看不到渐变效果

现在在 ChartJS 上使用这个概念并将 conix 渐变设置为背景 根据扇区数量生成梯度 我们将按照 360 度将扇区分成相等的部分 ->（360 / 扇区数）

您需要在颜色[]数组中提供与标签相同的颜色，它将相应地生成渐变（例如：4个标签，然后4个颜色，然后将生成4个扇区）

看下面的代码

codepen 链接在这里

const data = {
  labels: [
    "Eating",
    "Drinking",
    "Sleeping",
    "Designing",
    "Coding",
    "Cycling",
    "Running"
  ],
  datasets: [
    {
      label: "My First Dataset",
      data: [65, 59, 90, 81, 56, 55, 40],
      fill: true,
      // backgroundColor: "rgba(255, 99, 132, 0.2)",
      borderColor: "rgb(255, 99, 132)",
      pointBackgroundColor: "rgb(255, 99, 132)",
      pointBorderColor: "#fff",
      pointHoverBackgroundColor: "#fff",
      pointHoverBorderColor: "rgb(255, 99, 132)"
    },
    {
      label: "My Second Dataset",
      data: [28, 48, 40, 19, 96, 27, 100],
      fill: true,
      // backgroundColor: "rgba(54, 162, 235, 0.2)",
      borderColor: "rgb(54, 162, 235)",
      pointBackgroundColor: "rgb(54, 162, 235)",
      pointBorderColor: "#fff",
      pointHoverBackgroundColor: "#fff",
      pointHoverBorderColor: "rgb(54, 162, 235)"
    }
  ]
};

var ctx = document.getElementById("radarChart");

var myRadarChart = new Chart(ctx, {
  type: "radar",
  data: data,
  options: {
    plugins: {
      legend: {
        display: false
      }
    },
    elements: {
      line: {
        borderWidth: 3
      }
    },
    scales: {
      r: {
        angleLines: {
          display: true
        },
        suggestedMin: 50,
        suggestedMax: 200
      }
    }
  }
});

// colors you want to use
var color = [
  "#ff000070",
  "#ffff0070",
  "#00800070",
  "#0000ff70",
  "#a52a2a70",
  "#80008070",
  "#80808070"
];

var colorData = [];

//this creates double entries as required in conic gradient in css
color.map((e, i) => {
  colorData.push(e);
  colorData.push(e);
});

//equal parts for sector
const angles = (360 / data.labels.length).toFixed(2) * 1;

var angle = 0;
var angleValues = [];

// to create successive angles for sectors
//this create value to insert in conic gradient with color and angle in deg
colorData.map((e, i) => {
  e = e + ` ${angle}deg`;
  angleValues.push(e);
  if (i % 2 !== 1) {
    angle = angle + angles;
  }
});

//now convert array to string and put inside css
var bgConic = `conic-gradient(from ${
  angles / 2
}deg, ${angleValues.toString()})`;

console.log(bgConic);
//apply our home-made css
ctx.style.backgroundImage = bgConic;

.container {
  width: 600px;
  height: 600px;
  margin: 0 auto;
}
  #radarChart {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;


/*for hexagon shape*/
    clip-path: polygon(
      49% 0,
      90% 20%,
      100% 60%,
      75% 100%,
      25% 100%,
      0% 60%,
      10% 20%
    );
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <canvas id="radarChart"></canvas>
</div>

最后在

clip-path

上使用

canvas

css 来制作六边形

还有 codepen 链接在这里

Answer 2

尝试这些选项

options: {
    scales: {
      r: {
        ticks: {
          backdropColor: 'rgba(0,0,0,1)',
        },
        angleLines: {
          display: true,
          color: 'rgba(255,255,5,1)',
        },
        grid: {
          circular: true,
          color: 'rgba(255,255,1,1)',
        },
        backgroundColor:'red',
        suggestedMin: 0,
        suggestedMax: 4,
      },
    },
    responsive: true,
    elements: {
      line: {
        borderWidth: 1,
        borderJoinStyle: 'round',
        borderCapStyle: 'round',
      },
      point: {
        pointStyle: 'circle',
        borderColor: 'rgba(255,255,255,0.1)',
      },
    },
  }

已使用背景颜色更新了您的图表选项。

检查此链接雷达图网格线 在配置选项卡中使用上述选项更新选项。