我如何控制Chart.JS饼图的图例的位置以及它的外观？ [英] How can I control the placement of my Chart.JS pie chart's legend, as well as its appearance?

问题描述

我可以使用Chart.JS创建一个饼图并添加以下代码：

HTML

 < DIV> 
< canvas id =top10ItemsChartstyle =padding-left：20pxwidth =320height =320>< / canvas> 
< div id =top10Legendclass =chart-legend>< / div> 
< / div> 
  

jQuery

  var data = [{
 value：2755，
 color：＃FFE135，
 label：Bananas
}，{
 value： 2256，
颜色：＃3B5323，
标签：生菜，罗马尼亚
}，{
值：1637，
颜色：＃fc6c85， 
标签：瓜，西瓜
}，{
值：1608，
颜色：＃ffec89，
标签：菠萝
 }，{
值：1603，
颜色：＃021c3d，
标签：浆果
}，{
值：1433，
颜色：＃3B5323，
标签：生菜，春季混合
}，{
值：1207，
颜色：＃046b00，
标签：花椰菜
}，{
值：1076，
颜色：＃cef45a，
标签：甜瓜，蜜瓜
}，{
值：1056，
颜色：＃421C52，
标签：葡萄
}，{
值：1048，
颜色：＃FEA620 ，
标签：甜瓜，甜瓜
}]; 
 $ b var optionsPie = {
 legend：{
 display：true，
 position：'right'，
 labels：{
 fontColor： 'rgb（255,99,132）'
} 
} 
} 
 
 var ctx = $（＃top10ItemsChart）。get（0）.getContext （ 2D）; 
 var top10PieChart =新图（ctx）.Pie（data，optionsPie）; 
 document.getElementById（'top10Legend'）。innerHTML = top10PieChart.generateLegend（）; 
  

问题在于它将图例置于馅饼底部，甚至溢出并渗出到外面我想让饼图限制自己的div的边界：

它还将图例呈现为简单的无序列表。我想要做的就是控制图例中各种元素的颜色（香蕉应该和香蕉派（可以这么说）是相同的颜色（＃FFE135）等）。

如何让各个元素与其各自的数据点颜色匹配？

UPDATE

官方文档中的Legend Label Configuration主题

所以这个图例冲击了它下面的图表，而不是将它自己限制在它自己的附近。

另外，我不希望项目符号指向感染这个传说 - 彩色正方形（以及语言 - 但也是值）是我所需要的。我怎样才能把传说从饼图的南边推到饼图的东边？

更新4

我根据

Still但是，正如你所看到的，这个传说正在侵犯它下面的象限。然而，在馅饼周围有一大堆空的/浪费的空间 - 我想将馅饼向左移动，并将馅饼右侧的图例移动。这也可以让更多的垂直空间让馅饼增长。

我该怎么做？这里是我现在使用的代码：

HTML

  < DIV> 
< canvas id =top10ItemsChartclass =piestyle =padding-left：20px>< / canvas> 
< div id =top10Legend>< / div> 
< / div> 
  

CSS

  .pie-legend {
 list-style：none; 
保证金：0; 
 padding：0; 
} 
 
 .pie-legend span {
 display：inline-block; 
 width：14px; 
 height：14px; 
 border-radius：100％; 
 margin-right：16px; 
 margin-bottom：-2px; 
} 
 
 .pie-legend li {
 margin-bottom：10px; 
 display：inline-block; 
 margin-right：10px; 
 
 $ / code> 

JQUERY

  var data = [{
 value：2755，
 color：＃FFE135，
 label：Bananas：2,755（18％）
}，{
。 。 。 
}，{
值：1048，
颜色：＃FEA620，
标签：甜瓜，甜瓜：1,048（7％）
}]; 
 
 var optionsPie = {
 responsive：true，
 scaleBeginAtZero：true，
 legendTemplate：< ul class = \<％= name.toLowerCase （var i = 0; i< segments.length; i ++）{％>< li>< span style = \background-color： <％=区段[I] .fillColor％GT; \>< /跨度><如果％（段[I] .label）{％GT;<％=区段[I] .label％ ><％}％GT;< /立GT;<％}％GT;< / UL>中
 
 
 var ctx = $（＃top10ItemsChart）。get（0）.getContext（2d）; 
 var top10PieChart =新图（ctx）.Pie（data，optionsPie）; 
 $（＃top10Legend）。html（top10PieChart.generateLegend（））; 
  

注意：将其添加到optionsPie：

 图例：{
显示：true，
位置：'right'
}，
  

...什么都不做 - 传说仍然会像一只青蛙用鹌鹑肉一样落到地板上。

UPDATE 5

我已经玩过Teo的例子，试图让它正常工作，但是，尽管它更好的是，馅饼非常小，传说应该更广泛，但我无法弄清楚如何水平延伸传说和馅饼在各个方向。以下是现在的样子：

这是现在的代码（JQUERY是相同的）：
$ b $ p HTML

 < ; div class =col-md-6> 
< div class =topleft> 
< h2 class =sectiontext>十大项目< / h2> 
< br /> 
< div class =legendTable> 
< div class =legendCell> 
< canvas id =top10ItemsChartclass =piestyle =padding-left：20px>< / canvas> 
< / div> 
< div class =legendCellid =top10Legend> 
< / div> 
< / div> 
< / div> 
< / div> 
  

CSS

  .topleft {
 margin-top：-4px; 
 margin-left：16px; 
 margin-bottom：16px; 
 padding：16px; 
 border：1px纯黑色; 
} 
 
 canvas {
 width：100％！important; 
 height：auto！important; 
} 
 
 .legendTable {
 border：1px solid forestgreen; 
 display：table; 
宽度：100％; 
 table-layout：fixed; 
} 
 
 .legendCell {
 display：table-cell; 
 vertical-align：middle; 
} 
 
 .pie-legend ul {
 list-style：none; 
保证金：0; 
 padding：0; 
 width：300px; 
} 
 
 .pie-legend span {
 display：inline-block; 
 width：14px; 
 height：12px; 
 border-radius：100％; 
 margin-right：4px; 
 margin-bottom：-2px; 
} 
 
 .pie-legend li {
 margin-bottom：4px; 
 display：inline-block; 
 margin-right：4px; 
} 
  

有些东西正在挤压馅饼并将图例的外边缘压在一起。 / p>

UPDATE 6

Ochi，et al：这是我在代码的连接后看到的结果：

这是我的代码 - 我甚至订购了jQuery这种方式你有它，但我怀疑这是真的有必要：

HTML

 < div class =rowid =top10Items> 
< div class =col-md-6> 
< div class =topleft> 
< h2 class =sectiontext>十大项目< / h2> 
< br /> 
 @ *< div class =legendTable> 
< div class =legendCell> 
< canvas id =top10ItemsChartclass =piestyle =padding-left：20px>< / canvas> 
< / div> 
< div class =legendCellid =top10Legend> 
< / div> 
< / div> * @ 
< div class =chart> 
< canvas id =top10ItemsChartclass =pie>< / canvas> 
< div id =pie_legend>< / div> 
< / div> 
< / div> 
< / div> 
。 。 。 
< / div> 
  

CSS

  .pie-legend {
 list-style：none; 
保证金：0; 
 padding：0; 
} 
 
 .pie-legend span {
 display：inline-block; 
 width：14px; 
 height：14px; 
 border-radius：100％; 
 margin-right：16px; 
 margin-bottom：-2px; 
} 
 
 .pie-legend li {
 margin-bottom：10px; 
 display：block; 
 margin-right：10px; 
} 
 
 .chart，
 #priceComplianceBarChart，
 #pie_legend {
 display：inline-flex; 
 padding：0; 
保证金：0; 
 
 $ / code> 

JQUERY

  var optionsPie = {
 responder：true，
 scaleBeginAtZero：true，
 legendTemplate：< ul class = \<％= name。 toLowerCase（）％> -legend \><％for（var i = 0; i< segments.length; i ++）{％>< li>< span style = \background-color ：其中％=段[I] .fillColor％GT; \>< /跨度><如果％（段[I] .label）{％GT;<％=区段[I] .label ％GT;<％}％GT;< /立GT;<％}％GT;< / UL>中
 
 
 var ctx = $（＃top10ItemsChart）。get（0）.getContext（2d）; 
 
 var data = [{
 value：2755，
 color：＃FFE135，
 label：Bananas：2,755（18％）
。 。 。 
}，{
值：1048，
颜色：＃FEA620，
标签：甜瓜，甜瓜：1,048（7％）
}]; 
 
 var top10PieChart =新图表（ctx）.Pie（data，optionsPie）; 
 $（＃pie_legend）。html（top10PieChart.generateLegend（））; 
  

...然而这块馅饼比一只大象上的弹力裤还要紧。

b
$ b

UPDATE 7

也许存在配置问题或其他问题。我决定升级到Chart.JS的2.1.3版本（从1.0.2版开始）：

pre $ @ *< script src =https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js>< / script> * @
< ; script src =https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js>< / script>


...并且几乎完全抄袭Teo Dragovic的CodePen

我还需要引用Chart.JS CSS文件吗？

解决方案

使用Chart.JS的第2版，这是可行的（或多或少）：
$ b

HTML

 < h2 class =sectiontext>前10个项目< / h2> 
< br /> 
< div class =chart> 
< canvas id =top10ItemsChartclass =pie>< / canvas> 
< div id =pie_legend>< / div> 
< / div> 
  

JQUERY

  var data = {
标签：[
香蕉：2,755（18％），
生菜，长叶莴苣：2,256（14％），
甜瓜，西瓜：1,637（10％），
菠萝：1,608（10％），
浆果：1,603（10％），
生菜，春季混合：1,433 （9％），
西兰花：1,207（8％），
蜜瓜，蜜露：1,076（7％），
葡萄：1,056（7％） 
甜瓜，甜瓜：1,048（7％）
，
数据集：[
 {
数据：[2755,2256,1637,1608,1603， 
 backgroundColor：[
＃FFE135，
＃3B5323，
＃fc6c85，
 ＃ffec89，
＃021c3d，
＃3B5323，
＃046b00，
＃cef45a，
＃421C52，
#FE A620
，
}] 
}; 
 
 var optionsPie = {
 responsive：true，
 scaleBeginAtZero：true 
} 
 
 var ctx = $（＃top10ItemsChart）获得（0）.getContext（ 2D）; 
 var top10PieChart =新图表（ctx，
 {
类型：'pie'，
 data：data，
 options：optionsPie 
}）; 
 
 $（＃top10Legend）。html（top10PieChart.generateLegend（））; 
  

我说或多或少，因为这些馅饼仍然很可怜：

I am able to create a pie chart using Chart.JS with this code:

HTML

<div>
    <canvas id="top10ItemsChart" style="padding-left:20px" width="320" height="320"></canvas>
    <div id="top10Legend" class="chart-legend"></div>
</div>

jQuery

var data = [{
    value: 2755,
    color: "#FFE135",
    label: "Bananas"
}, {
    value: 2256,
    color: "#3B5323",
    label: "Lettuce, Romaine"
}, {
    value: 1637,
    color: "#fc6c85",
    label: "Melons, Watermelon"
}, {
    value: 1608,
    color: "#ffec89",
    label: "Pineapple"
}, {
    value: 1603,
    color: "#021c3d",
    label: "Berries"
}, {
    value: 1433,
    color: "#3B5323",
    label: "Lettuce, Spring Mix"
}, {
    value: 1207,
    color: "#046b00",
    label: "Broccoli"
}, {
    value: 1076,
    color: "#cef45a",
    label: "Melons, Honeydew"
}, {
    value: 1056,
    color: "#421C52",
    label: "Grapes"
}, {
    value: 1048,
    color: "#FEA620",
    label: "Melons, Cantaloupe"
}];

var optionsPie = { 
   legend: {
       display: true,
       position: 'right',
       labels: {
           fontColor: 'rgb(255, 99, 132)'
       }
  }
}

var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx).Pie(data, optionsPie);
document.getElementById('top10Legend').innerHTML = top10PieChart.generateLegend();

The problem is that it positions the legend to the bottom of the pie, and even spilling and bleeding outside of the boundaries of the div to which I want the pie to restrict itself:

It also presents the legend as a simple unordered list. What I want to do is to control the color of the various elements in the legend ("Banana" should be the same color (#FFE135) as the piece of banana pie (so to speak), etc.)

How can I make the individual elements match the color of its respective data point?

UPDATE

The "Legend Label Configuration" topic in the official docs here indicate you can set the fontColor of the legends, but this is for the whole shebang; what I want to know is, how is it possible to control the color of each item?

UPDATE 2

In an attempt to at least get the legend displaying in the desired spot, I added this to the jQuery:

var optionsPie = {
            legend: {
                display: true,
                position: 'right',
                labels: {
                    fontColor: 'rgb(255, 99, 132)'
                }
            }
        }

. . .
var myPieChart = new Chart(ctx).Pie(data, optionsPie);
document.getElementById("legendDiv").innerHTML = myPieChart.generateLegend();

...but it makes no difference - the legend is still hung from the bottom of the pie chart, and its font is still the default black.

UPDATE 3

I utilized some suggested code, but the legend is still gravity-fed instead of hanging off to the right:

So the legend impinges on the chart below it, rather than restricting itself to its own neighborhood.

Also, I don't want the bullet points to infest the legend - the colored squares (and the verbiage - but also the values) are all I need. How can I shove the legend from south of the pie to east of the pie?

UPDATE 4

I have refactored the code based on this and it's looking better (I added more data to the "label" value of the data array, too):

Still, though, as you can see the legend is infringing on the quadrant below it. There is a "ton" of empty/wasted space around the pie, though - I want to move the pie to the left, and the legend to the right of the pie. That would also allow more vertical space for the pie to grow in stature.

How can I do that? Here is the code I'm using now:

HTML

<div>
    <canvas id="top10ItemsChart" class="pie" style="padding-left:20px"></canvas>
    <div id="top10Legend"></div>
</div>

CSS

.pie-legend {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .pie-legend span {
        display: inline-block;
        width: 14px;
        height: 14px;
        border-radius: 100%;
        margin-right: 16px;
        margin-bottom: -2px;
    }

    .pie-legend li {
        margin-bottom: 10px;
        display: inline-block;
        margin-right: 10px;
    }

JQUERY

    var data = [{
        value: 2755,
        color: "#FFE135",
        label: "Bananas: 2,755 (18%)"
    }, {
. . .            
}, {
        value: 1048,
        color: "#FEA620",
        label: "Melons, Cantaloupe: 1,048 (7%)"
    }];

    var optionsPie = {
        responsive: true,
        scaleBeginAtZero: true,
        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
    }

    var ctx = $("#top10ItemsChart").get(0).getContext("2d");
    var top10PieChart = new Chart(ctx).Pie(data, optionsPie);
    $("#top10Legend").html(top10PieChart.generateLegend());

NOTE: Adding this to optionsPie:

legend: {
    display: true,
    position: 'right'
},

...does nothing - the legend remains weighted down to the floor like a frog filled to the chin with quail shot.

UPDATE 5

I've played around with Teo's example, trying to get it to work just right but, although it's better, the pie is very puny, and the legend should be wider, but I can't figure out how to stretch the legend horizontally and the pie in all directions. Here's how it looks now:

This is the code now (JQUERY is the same):

HTML

<div class="col-md-6">
    <div class="topleft">
        <h2 class="sectiontext">Top 10 Items</h2>
        <br />
        <div class="legendTable">
            <div class="legendCell">
                <canvas id="top10ItemsChart" class="pie" style="padding-left:20px"></canvas>
            </div>
            <div class="legendCell" id="top10Legend">
            </div>
        </div>
    </div>
</div>

CSS

    .topleft {
        margin-top: -4px;
        margin-left: 16px;
        margin-bottom: 16px;
        padding: 16px;
        border: 1px solid black;
    }

canvas {
    width: 100% !important;
    height: auto !important;
}

.legendTable {
    border: 1px solid forestgreen;
    display: table;
    width: 100%;
    table-layout: fixed;
}

.legendCell {
    display: table-cell;
    vertical-align: middle;
}

.pie-legend ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 300px;
}

.pie-legend span {
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 100%;
    margin-right: 4px;
    margin-bottom: -2px;
}

.pie-legend li {
    margin-bottom: 4px;
    display: inline-block;
    margin-right: 4px;
}

Something is squashing the pie and pushing the outer edges of the legend together.

UPDATE 6

Ochi, et al: Here's what I see after the Ochification of my code:

This is my code - I even ordered the jQuery in the way you have it, although I doubt that is really necessary:

HTML

    <div class="row" id="top10Items">
        <div class="col-md-6">
            <div class="topleft">
                <h2 class="sectiontext">Top 10 Items</h2>
                <br />
                @*<div class="legendTable">
                    <div class="legendCell">
                        <canvas id="top10ItemsChart" class="pie" style="padding-left:20px"></canvas>
                    </div>
                    <div class="legendCell" id="top10Legend">
                    </div>
                </div>*@
                <div class="chart">
                    <canvas id="top10ItemsChart" class="pie"></canvas>
                    <div id="pie_legend"></div>
                </div>
            </div>
        </div>
    . . .
</div>

CSS

.pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie-legend span {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 100%;
  margin-right: 16px;
  margin-bottom: -2px;
}

.pie-legend li {
  margin-bottom: 10px;
  display: block;
  margin-right: 10px;
}

.chart,
#priceComplianceBarChart,
#pie_legend {
  display: inline-flex;
  padding: 0;
  margin: 0;
}

JQUERY

var optionsPie = {
    responsive: true,
    scaleBeginAtZero: true,
    legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
}

var ctx = $("#top10ItemsChart").get(0).getContext("2d");

var data = [{
    value: 2755,
    color: "#FFE135",
    label: "Bananas: 2,755 (18%)"
    . . .
}, {
    value: 1048,
    color: "#FEA620",
    label: "Melons, Cantaloupe: 1,048 (7%)"
}];

var top10PieChart = new Chart(ctx).Pie(data, optionsPie);
$("#pie_legend").html(top10PieChart.generateLegend());

...and yet the pie is stretchier than stretch pants on an elephant.

UPDATE 7

Maybe there's a configuration problem or something. I decided to "upgrade" to version 2.1.3 of Chart.JS (started out w. version 1.0.2):

@*<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>*@
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>

...and copied almost exactly Teo Dragovic's CodePen here.

The only things I changed were the names of two CSS class ("table" became "legendTable" and "cell" became "legendCell") and the color of the table border from red to forestgreen, and I get this now:

Do I need to also a reference a Chart.JS CSS file or something?

解决方案

This is what works (more or less) using version 2 of Chart.JS:

HTML

<h2 class="sectiontext">Top 10 Items</h2>
<br />
<div class="chart">
    <canvas id="top10ItemsChart" class="pie"></canvas>
    <div id="pie_legend"></div>
</div>

JQUERY

var data = {
    labels: [
        "Bananas: 2,755 (18%)",
        "Lettuce, Romaine: 2,256 (14%)",
        "Melons, Watermelon: 1,637 (10%)",
        "Pineapple: 1,608 (10%)",
        "Berries: 1,603 (10%)",
        "Lettuce, Spring Mix: 1,433 (9%)",
        "Broccoli: 1,207 (8%)",
        "Melons, Honeydew: 1,076 (7%)",
        "Grapes: 1,056 (7%)",
        "Melons, Cantaloupe: 1,048 (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
}

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

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

I say, "more or less" because the pie pieces are still pitifully puny:

这篇关于我如何控制Chart.JS饼图的图例的位置以及它的外观？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！