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

【问题标题】：How can I control the placement of my Chart.JS pie chart's legend, as well as its appearance?如何控制 Chart.JS 饼图图例的位置及其外观？
【发布时间】：2017-01-25 05:50:11
【问题描述】：

我可以通过以下代码使用 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 边界之外溢出和流血：

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

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

更新

官方文档here中的“图例标签配置”主题表示可以设置图例的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

我使用了一些建议的代码，但图例仍然是重力输入的，而不是挂在右边：

所以这个图例会影响到它下面的图表，而不是把自己限制在它自己的附近。

另外，我不希望项目符号出现在图例中——彩色方块（和措辞——还有值）就是我所需要的。我怎样才能将图例从馅饼的南边推到馅饼的东边？

更新 4

我已经根据this 重构了代码，它看起来更好（我也向数据数组的“标签”值添加了更多数据）：

尽管如此，您可以看到图例侵犯了它下面的象限。不过，馅饼周围有“吨”的空白/浪费空间-我想将馅饼移到左侧，将图例移到馅饼的右侧。这也将为馅饼的增长提供更多的垂直空间。

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

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

注意：将此添加到 optionsPie：

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

...什么都不做 - 传奇仍然被压在地板上，就像一只被鹌鹑子弹填满下巴的青蛙。

更新 5

我玩过 Teo 的示例，试图让它正常工作，但虽然它更好，但馅饼非常小，图例应该更宽，但我不知道如何拉伸图例水平和各个方向的馅饼。这是它现在的样子：

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

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

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

更新 6

Ochi 等人：这是我在代码 Ochification 后看到的内容：

这是我的代码 - 我什至按照你的方式订购了 jQuery，尽管我怀疑这是否真的有必要：

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

...但馅饼比大象身上的弹力裤更有弹性。

更新 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”）以及表格边框的颜色从红色变成了森林绿色，我现在得到了这个：

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

【问题讨论】：

  • 如果您有链接到他们演示如何完成此操作的地方，我会很高兴看到它。
  • 对不起，我看到canvas.js，但它是Chart.js...试试Canvas.js 最好。
  • 我不知道您如何获得简单的列表作为标签，您一定是错过了一些要包含的样式吗？猜猜你得在your own上设计它们
  • 我不确定所需的输出，但我将您的小提琴更新为：jsfiddle.net/wprnvyd1/67 - 让我知道这是否接近您正在寻找的内容
  • 奇怪... - 我要出去办事了 - 我回来后会再调查一下 -

标签： html css chart.js legend legend-properties


【解决方案1】：

我认为这是你想要的：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;
}

更新：根据 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>
        <br />
        <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;
}

【讨论】：

  • Teo，请参阅更新 5。
  • 能否请您包含.topleft 类的CSS 代码？如果我知道周围的环境，调整布局会更容易。
  • 当然 - 我把它放在 Update 5 CSS 的顶部
  • @B.ClayShannon Chart.js v2.x 的 API 与 1.x 明显不同，请参阅他们的文档以获取数据对象示例。
  • 太棒了，这正是我想要的，但它有一个缺点，默认过滤功能丢失了（您单击图例，它会更改为穿过 css 并且该数据已从图表中删除）。有什么想法可以用这些传说恢复它吗？我在图例上尝试了 onClick 回调方法，但它不适用于这些自定义图例
【解决方案2】：

这就是（或多或少）使用 Chart.JS 版本 2 的方法：

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

我说“或多或少”是因为馅饼仍然微不足道：

【讨论】：

  • 是的，饼图明显小得令人尴尬。也许您可以使用 CSS/jQuery 去除饼图本身——只留下图例。然后在下面添加一个重复的饼图（没有图例），这样你就有一个大小合适的图例 + 图表。
  • 我并不太相信会更好；即便如此，恐怕也会违反 KISS 和 DRY 原则。
  • ChartJS 做得很好，但它肯定不是为了灵活性而构建的。所以......大声笑......你可能不得不亲吻干再见以实现更平衡的图例和图表。另一种方法是深入研究源代码以重新格式化图表的缩放比例。由于家庭事务，我时间紧迫，否则我会提供更多帮助。我喜欢阅读马克吐温（山姆克莱门斯），并祝你在新的冒险中快乐。干杯！
  • 谢谢；如果您恰好在 10 月 15 日在加利福尼亚州的莫克勒姆山（49 号公路上的天使营地以北 19 英里），下午 2 点将在那里的市政厅进行彩排。
【解决方案3】：

正如@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>

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-02-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode