如何使用 Chart.js 和 Canvas 实现 Polar 面积图答案

【问题标题】：How can I implement Polar area charts with Chart.js and Canvas如何使用 Chart.js 和 Canvas 实现 Polar 面积图
【发布时间】：2021-01-28 07:56:15
【问题描述】：

现在，我想用 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>

【问题讨论】：

标签： javascript canvas chart.js

【解决方案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的情况。如果画布中的最终图表位置发生变化（例如使用不同的画布纵横比），也可以进行微调。

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

【讨论】：

感谢您的回复！当我运行您的代码并在整页中观看该图表时，它似乎不起作用