时间戳

首页 > 解决方案 > 在 Bootstrap 列中强制两个带有图例的 Chart.js 圆环图大小相同

javascript - 在 Bootstrap 列中强制两个带有图例的 Chart.js 圆环图大小相同

问题描述

我有两个并排的引导列，我想在其中显示两个相关的 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
        }
      });

标签： javascripttwitter-bootstrapchart.js

解决方案

我最终使用了这里描述的方法，其中 HTML 图例被添加到单独的 div 中。我修改了圆环图的方法，它设置图表数据的方式与条形图略有不同。

推荐阅读