如何使图例出现在饼图(Chart.JS)的右侧? [英] How can I cause a legend to appear to the right of the pie (Chart.JS)?

问题描述

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

I'm creating a fairly simple pie chart with Chart.JS like so:

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());

看起来不错:

...但是我想要左边的饼图和右边的图例，图例垂直堆叠.我该如何实现这个目标?

...but I want the pie on the left and the legend on the right, with the legend vertically stacked. How can I accompilish that objective?

我尝试过:

CSS

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

HTML

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

...如此处，但没有任何区别.

...as suggested in the accepted answer here, but it makes no difference whatsoever.

修正错误的ID会显示新的图例，并在选项中添加"display:false"会导致原始图例消失，但新的图例仍显示在饼图的下方，拥挤在其div之外并渗入它下面的象限(显示为悬停在香蕉上):

Fixing the bad ID caused the new legend to display, and adding the "display: false" to the options caused the original one to disappear, but the new one still appears below the pie, crowding outside of its div and bleeding into the quadrant below it (shown hovering over bananas):

使用接受的答案的代码时的外观如下:

Here's how it looks with the accepted answer's code applied:

派仍然是微不足道的，但这比以前要好得多(并回答了问题).

The pie is still puny, but this is much better than it was (and answers the question).

推荐答案

您必须先使用以下选项在选项中关闭默认图例:

You have to turn the default legend off in the options first with:

legend: {
        display: false
},

此外，您的图例的id选择器也是错误的. 小提琴.

Also your id selector for your legend was wrong. Fiddle.

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

Wrap the chart in the <div> and set the height and width of that since the canvas will be responsive to its container, then set the canvas's div and the legend's div as 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;
    }

这篇关于如何使图例出现在饼图(Chart.JS)的右侧?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！