如何获取非Vega空模板以制作带图案的Donut Chart？

非Vega空模板获取与构建思路 #

• 直接创建HTML+Canvas/SVG基础空模板：
  无需依赖Vega类库，自己写最基础的HTML结构即可作为自定义起点，以下是SVG版本示例：

  <!DOCTYPE html>
  <html>
  <head>
      <title>自定义图案环形图</title>
      <style>
          svg { width: 400px; height: 400px; }
      </style>
  </head>
  <body>
      <svg id="donut-chart" viewBox="0 0 400 400"></svg>
      <script>
          // 在此编写环形图绘制逻辑，包含图案填充的定义与应用
      </script>
  </body>
  </html>
  

• 基于轻量可视化库的基础模板：
  比如Chart.js自带环形图（doughnut）模板，且支持通过自定义逻辑实现图案填充，示例结构如下：

  <!DOCTYPE html>
  <html>
  <head>
      <title>Chart.js图案环形图</title>
      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>
  <body>
      <canvas id="donut-chart" width="400" height="400"></canvas>
      <script>
          const ctx = document.getElementById('donut-chart').getContext('2d');
          const myChart = new Chart(ctx, {
              type: 'doughnut',
              data: {
                  labels: ['类别A', '类别B'],
                  datasets: [{
                      data: [45, 55],
                      backgroundColor: [
                          createPattern(ctx, 'dots'),
                          createPattern(ctx, 'stripes')
                      ]
                  }]
              }
          });
  
          // 自定义图案生成函数
          function createPattern(ctx, type) {
              const patternCanvas = document.createElement('canvas');
              patternCanvas.width = 20;
              patternCanvas.height = 20;
              const pCtx = patternCanvas.getContext('2d');
              
              if (type === 'dots') {
                  pCtx.fillStyle = '#333';
                  pCtx.beginPath();
                  pCtx.arc(10,10,2,0,Math.PI*2);
                  pCtx.fill();
              } else if (type === 'stripes') {
                  pCtx.strokeStyle = '#333';
                  pCtx.lineWidth = 2;
                  pCtx.beginPath();
                  pCtx.moveTo(0,0);
                  pCtx.lineTo(20,20);
                  pCtx.stroke();
              }
              return ctx.createPattern(patternCanvas, 'repeat');
          }
      </script>
  </body>
  </html>
  

• 前端框架组件空模板（以React为例）：
  若使用框架开发，可直接创建组件结构作为自定义起点：

  import { useEffect, useRef } from 'react';
  
  const DonutChart = () => {
      const svgRef = useRef(null);
  
      useEffect(() => {
          const svg = svgRef.current;
          // 定义SVG图案
          const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
          const dotPattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
          dotPattern.setAttribute('id', 'dot-pattern');
          dotPattern.setAttribute('width', '20');
          dotPattern.setAttribute('height', '20');
          dotPattern.setAttribute('patternUnits', 'userSpaceOnUse');
          
          const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
          circle.setAttribute('cx', '10');
          circle.setAttribute('cy', '10');
          circle.setAttribute('r', '2');
          circle.setAttribute('fill', '#333');
          dotPattern.appendChild(circle);
          defs.appendChild(dotPattern);
          svg.appendChild(defs);
  
          // 后续编写环形图路径绘制逻辑，引用定义好的图案填充
      }, []);
  
      return <svg ref={svgRef} width="400" height="400"></svg>;
  };
  
  export default DonutChart;
  

核心提示 #

• 无需刻意寻找“现成空模板”，基于HTML/Canvas/SVG或轻量库搭建的基础结构就是可完全自定义的起点。
• 图案替代颜色的核心逻辑是利用Canvas的createPattern方法，或是SVG的<pattern>元素，直接在绘图代码中定义即可实现。

内容的提问来源于stack exchange，提问作者Lillian Welsh