如何使图例出现在饼图的右侧 (Chart.JS)？

Question

我正在用 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());

看起来不错：

...但我想要左边的饼图和右边的图例，图例垂直堆叠。我怎样才能做到 objective?

更新

我试过这个：

CSS

.pieLegend li span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
}

HTML

<div id="pie_legend" class="pieLegend"></div>

...如已接受的答案中所建议，但这没有任何区别。

更新 2

修复错误的ID导致新的图例显示，并在选项中添加"display: false"导致原来的消失，但新的仍然出现在饼图下方，挤在它的[=之外55=] 并渗入其下方的象限（显示悬停在香蕉上）：

更新 3

这是应用了已接受答案的代码后的样子：

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

Answer 1

您必须先在选项中关闭默认图例：

legend: {
        display: false
},

您的 id 图例选择器也是错误的。 Fiddle.

将图表包裹在 <div> 中并设置其高度和宽度，因为 canvas 将响应其容器，然后设置 canvas 的 div 和图例的 div 为 display:inline-block。

HTML

<div id="kpi">
    <div id="container">
      <canvas id="top10ItemsChart"></canvas>
    </div>
    <div id="top10Legend" class="pieLegend"></div>
</div>

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;
    }

Answer 2

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

legend: {
   position:"right"
}

到图表选项

JSfiddle

如何使图例出现在饼图的右侧 (Chart.JS)？

How can I cause a legend to appear to the right of the pie (Chart.JS)?

chart.js

pie-chart

chart.js2

更新

更新 2

更新 3