如何使图例显示在饼图（Chart.JS）的右侧？

我正在使用chart.JS创建一个相当简单的饼图，如下所示：

var data = {
    labels: [
        "Bananas (18%)",
        "Lettuce, Romaine (14%)",
        "Melons, Watermelon (10%)",
        "Pineapple (10%)",
        "Berries (10%)",
        "Lettuce, Spring Mix (9%)",
        "Broccoli (8%)",
        "Melons, Honeydew (7%)",
        "Grapes (7%)",
        "Melons, Cantaloupe (7%)"
    ],
    datasets: [
        {
            data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
            backgroundColor: [
                "#FFE135",
                "#3B5323",
                "#fc6c85",
                "#ffec89",
                "#021c3d",
                "#3B5323",
                "#046b00",
                "#cef45a",
                "#421C52",
                "#FEA620"
            ]
        }
    ]
};

var optionsPie = {
    responsive: true,
    scaleBeginAtZero: true,
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data) {
                return data.labels[tooltipItem.index] + ": " +
                    formatter.format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]);
            }
        }
    }
};

var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx,
{
    type: 'pie',
    data: data,
    options: optionsPie
});

$("#top10Legend").html(top10PieChart.generateLegend());

看起来不错：

…但我希望左边是馅饼，右边是图例，图例垂直堆叠。我怎样才能实现这个目标

更新 我试过这个：

CSS

HTML

…正如公认的答案中所建议的，但没有任何区别

更新2 修复坏ID导致新图例显示，并将“display:false”添加到选项中导致原始图例消失，但新图例仍显示在饼图下方，拥挤在其div之外，并流入其下方的象限（如图所示，悬停在香蕉上）：

更新3 下面是应用已接受答案代码后的外观：

---

馅饼仍然很小，但这比以前好多了（并且回答了这个问题）。

您必须首先使用以下选项关闭默认图例：

legend: {
        display: false
},

您的图例的

id

选择器也错误

将图表包装在

中，并设置其高度和宽度，因为画布将响应其容器，然后将画布的

div

和图例的

div

设置为

显示：内联块

HTML

---

必须首先使用以下选项关闭选项中的默认图例：

legend: {
        display: false
},

您的图例的

id

选择器也错误

将图表包装在

中，并设置其高度和宽度，因为画布将响应其容器，然后将画布的

div

和图例的

div

设置为

显示：内联块

HTML

---

右对齐图例的另一种方法是添加：

legend: {
   position:"right"
}

转到图表选项

---

另一种右对齐图例的方法是添加：

legend: {
   position:"right"
}

转到图表选项

---

修复ID选择器会导致图例显示，但显示在饼图下方；我需要它在右边-它下面没有足够的空间，所以它会流到下面的象限。@B.ClayShannon这是因为画布是有响应的。诀窍是将画布放入

div

中，并设置

div

的高度和宽度。然后将该容器和图例设置为

display:inline block

。看看吧，它在一个div里面——一个增强型div，占据了页面可用部分宽度的一半。我会给出你的建议。。@B.ClayShannon是我所说的引导版本。@B.ClayShannon谢谢，这有点老套，但你可以利用尺寸和什么来获得一些不可管理的东西。要去除要点，请注意我更新答案中的最后一条CSS规则。修复ID选择器会导致图例显示，但位于饼图下方；我需要它在右边-它下面没有足够的空间，所以它会流到下面的象限。@B.ClayShannon这是因为画布是有响应的。诀窍是将画布放入

div

中，并设置

div

的高度和宽度。然后将该容器和图例设置为

display:inline block

。看看吧，它在一个div里面——一个增强型div，占据了页面可用部分宽度的一半。我会给出你的建议。。@B.ClayShannon是我所说的引导版本。@B.ClayShannon谢谢，这有点老套，但你可以利用尺寸和什么来获得一些不可管理的东西。为了消除这些要点，请注意我更新答案中的最后一条CSS规则。

 #kpi{
      height: 400px;
      width: 100%;
      border: 1px solid black;
      background-color: white;
    }
    .pieLegend li span {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 5px;
    }

    #top10Legend {
      display: inline-block;
    }

    #container {
      display: inline-block;
      height: 50%;
      width: 50%;
    }

    #top10Legend>ul{
      list-style:none;
    }

legend: {
   position:"right"
}