基于Vue.js实现带箭头的Chart.js径向图表技术咨询

当然可以用Chart.js创建你需要的这类图表，它本质是分组堆叠条形图，下面是具体的实现步骤和代码：

• 第一步：确保已引入Chart.js库
  可以通过本地文件引入，或使用CDN方式引入（比如在HTML中添加对应脚本标签）。

• 第二步：准备图表容器
  在HTML中添加一个canvas元素作为图表的渲染容器：

  <canvas id="myChart"></canvas>
  

• 第三步：编写配置代码
  通过JS配置图表的类型、数据和样式，核心是利用stack属性和坐标轴的堆叠设置来实现分组堆叠效果：

  const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ['类别1', '类别2', '类别3'], // 对应图中的横向分组
          datasets: [
              {
                  label: '系列A',
                  data: [12, 19, 3],
                  backgroundColor: '#ff6384',
                  stack: 'group1' // 同一stack的系列会在y轴堆叠
              },
              {
                  label: '系列B',
                  data: [2, 3, 20],
                  backgroundColor: '#36a2eb',
                  stack: 'group1'
              },
              {
                  label: '系列C',
                  data: [5, 10, 8],
                  backgroundColor: '#ffce56',
                  stack: 'group2'
              },
              {
                  label: '系列D',
                  data: [7, 15, 5],
                  backgroundColor: '#4bc0c0',
                  stack: 'group2'
              }
          ]
      },
      options: {
          responsive: true,
          scales: {
              x: {
                  stacked: false, // x轴不堆叠，让不同stack的系列横向并排（分组）
                  title: {
                      display: true,
                      text: '类别'
                  }
              },
              y: {
                  stacked: true, // y轴堆叠，让同一stack的系列纵向叠加
                  title: {
                      display: true,
                      text: '数值'
                  }
              }
          }
      }
  });
  

关键说明 #

• 通过给不同数据集设置相同的stack值，实现同一分组内的堆叠效果；
• 设置scales.x.stacked = false让不同stack的数据集在x轴上形成分组；
• 你可以根据需求修改labels、data、backgroundColor等参数，匹配你图表的实际内容和样式。

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