如何使用Chart.js在网页中实现两个并排的内联图表

代码存在两个核心问题导致双图表无法正常内联显示：

1. 布局样式配置错误：定义的.gfg类未绑定到任何DOM节点，同时给两个<canvas>标签设置了width:100%属性。默认行内元素的百分比宽度会直接占满父容器整行空间，第二个canvas被挤到可视区域外，初始化时无法获取正确渲染尺寸，直接渲染失败。
2. 颜色工具函数存在逻辑bug：getColors函数中取色逻辑的模运算写为pallet.length - 1，会导致颜色取值错位，极端情况会引发图表配置异常。

按以下步骤调整即可实现双图表内联展示：

• 给canvas元素设置正确的行内块布局，固定单图表宽度占比，避免单个图表占满整行
• 修正颜色函数的模运算逻辑
• 把第二个图表的type改为doughnut，匹配最初要做环形图的需求
• 给两个图表加上垂直对齐属性，避免图例、标题高度不一致导致布局错位

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<style>
  canvas {
    display: inline-block;
    width: 45%;
    max-width: 400px;
    vertical-align: top;
    margin: 0 2%;
  }
</style>

<body>
    <canvas id="myChart1" width="90" height="90"></canvas>
    <canvas id="myChart2" width="90" height="90"></canvas>
    <script>
      function getColors(length) {
        let pallet = ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"];
        let colors = [];
  
        for (let i = 0; i < length; i++) {
          // 修正模运算取值错误
          colors.push(pallet[i % pallet.length]);
        }
  
        return colors;
      }
      var xValues = ['Multimeter', 'UniBox', 'Toby', 'Cables', 'Test'];
      var yValues = [2, 100, 223, 84, 197];
      var barColors = getColors(xValues.length);
  
      new Chart("myChart1", {
        type: "pie",
        data: {
          labels: xValues,
          datasets: [{
            backgroundColor: barColors,
            data: yValues
          }]
        },
        options: {
          legend: {
            display: true,
            labels: {
              fontSize: 20,
            }
          },
          title: {
            display: true,
            fontColor: 'rgb(255, 0, 0)',
            fontSize: 25,
            text: "缺货产品统计（饼图）"
          }
        }
      });
      var xxValues = ['Multimeter', 'UniBox', 'Toby', 'Cables', 'Test','kinley'];
      var yyValues = [2, 100, 223, 84, 197,100];
      var barColors2 = getColors(xxValues.length);
  
      new Chart("myChart2", {
        // 切换为环形图类型
        type: "doughnut",
        data: {
          labels: xxValues,
          datasets: [{
            backgroundColor: barColors2,
            data: yyValues
          }]
        },
        options: {
          legend: {
            display: true,
            labels: {
              fontSize: 20,
            }
          },
          title: {
            display: true,
            fontColor: 'rgb(255, 0, 0)',
            fontSize: 25,
            text: "缺货产品统计（环形图）"
          }
        }
      });
    </script>
</body>
</html>

• 调整canvas样式里的width百分比和max-width值，可以自由控制两个图表的大小和间距
• 如果需要在小屏设备上自动变成上下排列，加个媒体查询在屏幕宽度小于阈值时把canvas的width改成90%即可
• 第二个图表的颜色变量重命名为barColors2，避免和第一个图表的颜色变量重名覆盖，减少后续维护歧义

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