Question

现在，我想用 Chart.js 和 Canvas 实现如下图所示的极地面积图。

我该怎么做才能实现它？

到目前为止，我尝试了以下代码但它不起作用。

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <style media="screen" type="text/css">#container{width:100%;height:100%;top:0;left:0;right:0;bottom:0;position:absolute;}</style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        const canvas = document.getElementById('chart')
        const ctx = canvas.getContext('2d');
        const gradient = ctx.createRadialGradient(75, 50, 5, 90, 60, 100)
        const [ w , h ] = [ canvas.clientWidth , canvas.clientHeight ];
        gradient.addColorStop(0.0 , 'rgb(255,0,0)');
        gradient.addColorStop(0.5 , 'rgb(0,255,0)');

        const data = {
          backgroundColor: [gradient,gradient,gradient,gradient,gradient],
          labels: ['First label', 'Second label', 'Third label', 'Fourth label', 'Fifth label'],
          datasets: [
            {
              label: 'First dataset',
              backgroundColor: gradient,
              data: [50, 20, 40, 50, 22]
            }
          ]
        };

        const options = {
          tooltips: {
            mode: 'label'
          },

        };

        const myRadarChart = new Chart(ctx, {
          type: 'polarArea',
          data,
          options
        });
    });
    </script>
</head>
<body>
    <canvas id="chart" width="${width}" height="${width}" />
</body>
</html>

Answer 1

试试这个：

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <style media="screen" type="text/css">#container{width:100%;height:100%;top:0;left:0;right:0;bottom:0;position:absolute;}</style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        const canvas = document.getElementById('chart')
        const ctx = canvas.getContext('2d');
        const [ w , h ] = [ canvas.clientWidth , canvas.clientHeight ];
        const r = 300;
        const gradient = ctx.createRadialGradient(w, h*1.2, 0, w, h, r * 0.6);
        gradient.addColorStop(0.0 , 'rgb(255,0,0)');
        gradient.addColorStop(1 , 'rgb(0,255,0)');

        const data = {
          backgroundColor: [gradient,gradient,gradient,gradient,gradient],
          labels: ['First label', 'Second label', 'Third label', 'Fourth label', 'Fifth label'],
          datasets: [
            {
              label: 'First dataset',
              backgroundColor: gradient,
              data: [50, 20, 40, 50, 22]
            }
          ]
        };

        const options = {
          tooltips: {
            mode: 'label'
          },

        };

        const myRadarChart = new Chart(ctx, {
          type: 'polarArea',
          data,
          options
        });
    });
    </script>
</head>
<body>
    <canvas id="chart" width="${width}" height="${width}" />
</body>
</html>

代码很好！这只是将图表最大圆的画布宽度、高度和半径用于position the gradient correctly的情况。如果画布中的最终图表位置发生变化（例如使用不同的画布纵横比），也可以进行细微调整。

从那里，您可以轻松地为您希望使用的每种颜色组合以相同的方式创建新的渐变。

如何使用 Chart.js 和 Canvas 实现极地面积图

1 个答案: