如何控制Chart.JS饼图图例的位置及其外观？-Java 学习之路

我可以使用Chart.JS创建一个饼图，其代码如下：

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

问题在于它将图例定位在饼图的底部，甚至在div的边界之外溢出和流血，我希望饼图限制自己：

enter image description here

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

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

更新

官方文档here中的"Legend Label Configuration"主题表明你可以设置传说的fontColor，但这是针对整个shebang;我想知道的是，如何控制每件商品的颜色？

更新2

为了至少让图例显示在所需的位置，我将其添加到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();

...但它没有区别 - 图例仍悬挂在饼图的底部，其字体仍然是默认的黑色 .

更新3

我使用了一些建议的代码，但传说仍然是重力馈送而不是向右悬挂：

enter image description here

所以传说冲击下面的图表，而不是限制自己的邻居 .

此外，我不希望子弹点侵袭传说 - 彩色方块（和措辞 - 但也是值）都是我需要的 . 我怎样才能将传说从馅饼南部推到馅饼的东边？

更新4

我已经根据this重构了代码并且它看起来更好（我向数据数组的"label"值添加了更多数据）：

enter image description here

但是，你可以看到传说正在侵犯它下方的象限 . 尽管如此，馅饼周围还是有“吨”的空/浪费空间 - 我想将馅饼移到左边，而馅饼右边则是传说 . 这也将允许更多的垂直空间让馅饼在身材上增长 .

我怎样才能做到这一点？这是我现在使用的代码：

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 ：将此添加到optionsPie：

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

......什么都不做 - 传说仍然像一只青蛙一样蜷缩在地板上，鹌鹑射到了下巴 .

更新5

我已经玩过Teo的例子，试图让它正常工作，但是，尽管它更好，但馅饼非常微不足道，而且传说应该更宽，但我无法弄清楚如何水平拉伸图例各个方向的馅饼 . 以下是它现在的样子：

enter image description here

这是现在的代码（JQUERY是一样的）：

HTML

<div class="col-md-6">
    <div class="topleft">
        <h2 class="sectiontext">Top 10 Items</h2>
        

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

有些东西正在挤压馅饼并将图例的外边缘推到一起 .

更新6

Ochi，et al：这是我在代码的Ochification之后看到的：

enter image description here

这是我的代码 - 我甚至以你拥有它的方式命令jQuery，尽管我怀疑这是非常必要的：

HTML

<div class="row" id="top10Items">
        <div class="col-md-6">
            <div class="topleft">
                <h2 class="sectiontext">Top 10 Items</h2>
                

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

......然而，馅饼比大象的弹力裤更有弹性 .

更新7

可能是配置问题或其他问题 . 我决定“升级”到Chart.JS的2.1.3版本（从版本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>

......并且几乎完全复制了Teo Dragovic的CodePen here .

我改变的唯一的东西是两个CSS类的名称（“table”变成“legendTable”，“cell”变成“legendCell”）和表格边框的颜色从红色到forestgreen，我现在得到这个：

enter image description here

我是否还需要引用Chart.JS CSS文件或其他东西？

3 回答

我想这就是你想要的： DEMO

首先，您需要通过覆盖固定的宽度和高度来响应 canvas 并将其包装在可用于定位的附加 div 中 . 我使用 display: table 作为居中元素，但如果您希望图表和图例占用50:50以外的不同空间，则将内部div设置为 inline-block 也可以 .

HTML：

<div class="table">
    <div class="cell">
        <canvas id="top10ItemsChart" class="pie"></canvas>
    </div>
    <div class="cell" id="top10Legend"></div>
</div>

CSS：

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

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

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

UPDATE: 根据OP的附加信息进行了一些调整 NEW DEMO

HTML：

<div class="container">
<div class="row">
<div class="col-md-6">
    <div class="topleft">
        <h2 class="sectiontext">Top 10 Items</h2>
        

        <div class="chart">
            <div class="pie">
                <canvas id="top10ItemsChart" class="pie"></canvas>
            </div>
            <div class="legend" id="top10Legend">
            </div>
        </div>
    </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;
    margin-left: -25%;
}

.chart {
    border: 1px solid forestgreen;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.pie {
    position: relative;
    padding: 10px 0;
    // adjust as necessary
    padding-left: 10px;
    padding-right: 0;
}

.legend {
    position: absolute;
    right: 10px;
    top: 10px;
    height: 100%;
    // adjust as necessary:
    width: 48%;
}

@media (max-width: 480px) {
    .legend {
        position: relative;
        width: 100%;
    }
    .pie {
        margin: 0;
    }
}

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

回复于 2024-05-06T09:50:06+08:00

正如@ B.ClayShannon所提到的，版本2与版本1有很大不同 . 以下是如何使用版本2自定义图例模板的示例 .

options: {
    legendCallback: function (chart) {
        var text = [];
        text.push('<ul class="' + chart.id + '-legend" style="list-style:none">');
        for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
            text.push('<li><div style="width:10px;height:10px;display:inline-block;background:' + chart.data.datasets[0].backgroundColor[i] + '" />&nbsp;');
            if (chart.data.labels[i]) {
                text.push(chart.data.labels[i]);
            }
            text.push('</li>');
        }
        text.push('</ul>');

        return text.join('');
    },
    legend: {display: false},
}

它没有直接显示在上面接受的解决方案中，而是在其他地方呈现您的图例你想打电话：

$("#myChartLegend").html(myChart.generateLegend());

最后，将一些HTML拉到一起（注意clearfix是一个Bootstrap类：

<div class="chart">
    <div style="float:left">
        <canvas id="myChart" class="pie" style="max-width:300px;"></canvas>
    </div>

    <div class="legend" id="myChartLegend" style="float:left;"></div>
    <div style="clear: both;"/>
</div>

回复于 2024-05-06T09:50:06+08:00

-1

这是使用Chart.JS版本2的工作（或多或少）：

HTML

<h2 class="sectiontext">Top 10 Items</h2>


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

我说，“或多或少”，因为馅饼碎片仍然可怜：

enter image description here

回复于 2024-05-06T09:50:06+08:00

如何控制Chart.JS饼图图例的位置及其外观？

更新

更新2

更新3

更新4

更新5

更新6

更新7

3 回答

相关问题