将两个带有图例的图例的Chart.js甜甜圈图强制放在Bootstrap列中

Question

我有两个并列的引导程序列，我想在其中显示两个相关的Chart.js甜甜圈图。我想包含这些图例，因此可以轻松查看含义，而无需使用鼠标进行交互式悬停。

事实是，当Chart.js绘制两个甜甜圈图时，实际图表的大小不同，因为一个图表中的图例相对会占用更多空间。

[我想要的是并排放置两个甜甜圈图，它们可以进行缩放，并且我确定实际的甜甜圈大小相同。

此处链接至jsfiddle：https://jsfiddle.net/emc86oux/1/

var chart = new Chart('plot1', {
        type: 'doughnut',
        data: {
          datasets: [{
            data: [3,6,10,6,1],
          }],
          labels: ["Lorem","ipsum","dolor","sit","amet"]
        },
        options: {
          legend: {
            align: "end",
            position: "bottom"
          },
          responsive: true,
          aspectRatio: 1
        }
      });

var chart = new Chart('plot2', {
        type: 'doughnut',
        data: {
          datasets: [{
            data: [6, 5, 9, 7, 8, 4, 1, 2, 3, 10, 5],
          }],
          labels: ["On", "the", "other", "hand", "we", "denounce", "with", "righteous", "indignation", "and", "dislike"]
        },
        options: {
          legend: {
            align: "end",
            position: "bottom"
          },
          responsive: true,
          aspectRatio: 1
        }
      });

Answer 1

我最终使用了here描述的方法，其中HTML图例添加在单独的div中。我修改了甜甜圈图的方法，该方法设置的图表数据与条形图略有不同。