是否可以使用 Chart.js 使雷达图具有多色填充？答案

【问题标题】：Is it possible to make a Radar Chart have a multi-color fill using Chart.js?是否可以使用 Chart.js 使雷达图具有多色填充？
【发布时间】：2022-06-25 01:30:34
【问题描述】：

雷达图似乎只有一种数据集的填充颜色。

我想让填充颜色跨轴变化。大致如下：

这在 Chart.js 中是否可行，还是我应该选择其他库？

【问题讨论】：

没有内置选项可以实现这一点。您需要编写代码来创建Radial Gradient fill，或者更有可能的是Conic Gradient。尽管sample implementation 不是您要查找的内容，但它确实显示了基本方法。如果您无法使其正常工作，请尝试并使用您的代码更新您的问题。
@timclutton 您的建议对您有很大帮助，谢谢

标签： javascript chart.js

【解决方案1】：

var marksCanvas = document.getElementById("canvas");

function createRadialGradient3(context) {
    const chartArea = context.chart.chartArea;
    if (!chartArea) {
        // This case happens on initial chart load
        return;
      }
    const chartWidth = chartArea.right - chartArea.left;
    const chartHeight = chartArea.bottom - chartArea.top;

    width = chartWidth;
    height = chartHeight;
    const centerX = (chartArea.left + chartArea.right) / 2;
    const centerY = (chartArea.top + chartArea.bottom) / 2;

    const ctx = context.chart.ctx;

    var gradient = ctx.createConicGradient(-1.0472, centerX, centerY);

    // The pattern is 30 degrees of blend between quadrants
    // 60 degrees of pure color in the quadrant
    gradient.addColorStop(0, 'rgba(78, 190, 235, .40)'); //blue
    gradient.addColorStop(.16667, 'rgba(78, 190, 235, .40)'); //blue
    gradient.addColorStop(0.25, 'rgba(255, 152, 49, .40)'); //orange
    gradient.addColorStop(0.41667, 'rgba(255, 152, 49, .40)'); //orange
    gradient.addColorStop(0.5, 'rgba(96, 230, 225, .40)');  // turqoise
    gradient.addColorStop(0.66667, 'rgba(96, 230, 225, .40)');  // turqoise
    gradient.addColorStop(0.75, 'rgba(45, 183, 87, .40)'); //green
    gradient.addColorStop(0.91667, 'rgba(45, 183, 87, .40)'); //green
    gradient.addColorStop(1, 'rgba(78, 190, 235, .40)'); //blue

    // Set the fill style and draw a rectangle
    ctx.fillStyle = gradient;
    ctx.fillRect(chartArea.left, chartArea.top, chartWidth, chartHeight);
  
    return gradient;
  }

const data = {
    labels: [
      'Including',
      'Aligning',
      'Owning',
      'Suggesting',
      'Analyzing',
      'Summarizing',
      'Listening',
      'Empathasizing',
      'Validating',
      'Vulnerabilty',     
      'Transparaency',
      'Recognizing',
    ],
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 90, 81, 56, 55, 40,80,76,68,23,47],
      fill: true, 
      backgroundColor: function(context) {

        return createRadialGradient3(context);
      },
      borderColor: 'rgba(255, 99, 132, 0)',
      pointBackgroundColor: 'rgba(255, 99, 132,0)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgb(255, 99, 132)'
    }]
  };

const config = {
    type: 'radar',
    data: data,
    options: {
      elements: {
        line: {
          borderWidth: 3
        },
      }
    },
  };



var radarChart = new Chart(marksCanvas, config);

【讨论】：