那些遇到过的问题

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

B. *_*non 21 html css legend legend-properties chart.js

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

HTML

<div>
    <canvas id="top10ItemsChart" style="padding-left:20px" width="320" height="320"></canvas>
    <div id="top10Legend" class="chart-legend"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

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();
Run Code Online (Sandbox Code Playgroud)

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

在此输入图像描述

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

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

UPDATE

在官方文档中的"图例标签配置"主题在这里表示可以设置传说FONTCOLOR,但是这是整个事情; 我想知道的是,如何控制每件商品的颜色？

更新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();
Run Code Online (Sandbox Code Playgroud)

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

更新3

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

在此输入图像描述

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

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

更新4

我已经基于此重构了代码并且它看起来更好(我也将更多数据添加到数据数组的"label"值):

在此输入图像描述

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

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

HTML

<div>
    <canvas id="top10ItemsChart" class="pie" style="padding-left:20px"></canvas>
    <div id="top10Legend"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

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;
    }
Run Code Online (Sandbox Code Playgroud)

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());
Run Code Online (Sandbox Code Playgroud)

注意:将其添加到optionsPie:

legend: {
    display: true,
    position: 'right'
},
Run Code Online (Sandbox Code Playgroud)

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

更新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>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

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

更新6

Ochi,et al:这是我在代码的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>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

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());
Run Code Online (Sandbox Code Playgroud)

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

更新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>
Run Code Online (Sandbox Code Playgroud)

...和复制几乎完全张志贤Dragovic的CodePen 这里.

我改变的唯一的东西是两个CSS类的名称("table"变成"legendTable","cell"变成"legendCell")和表格边框的颜色从红色到forestgreen,我现在得到这个:

在此输入图像描述

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

Teo*_*vic 15

我想这就是你想要的:DEMO

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

HTML:

<div class="table">
    <div class="cell">
        <canvas id="top10ItemsChart" class="pie"></canvas>
    </div>
    <div class="cell" id="top10Legend"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

更新:根据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>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

B. *_*non 2

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

超文本标记语言

<h2 class="sectiontext">Top 10 Items</h2>
<br />
<div class="chart">
    <canvas id="top10ItemsChart" class="pie"></canvas>
    <div id="pie_legend"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

查询

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());
Run Code Online (Sandbox Code Playgroud)

我说“或多或少”是因为馅饼的碎片仍然小得可怜：

在此输入图像描述

归档时间：

查看次数：

47490 次

最近记录：

8 年 前
相关归档
使页脚正确粘贴到页面底部 203
如何在https网站上的iframe中允许http内容 135
忽略父级填充 106
设置:基于类的悬停 48
如何阻止jQuery mobile将样式应用于我的特定表单元素 48
CSS3关键帧动画:结束并停留在最后一帧 37
将div保留在另一个div的底部 36
使用JavaScript模拟tab键 21
页面中的多个表单标签或一个表单标签？ 18
是否可以在scale_fill_gradient2()中定义"mid"范围？ 5
难疑归档
如何更改远程Git存储库的URI(URL)？ 3529
jQuery滚动到元素 2196
使用pip升级所有包 1859
ssh"权限太开放"错误 1859
如何将多行中的文本连接成SQL Server中的单个文本字符串？ 1813
为什么Java有瞬态字段？ 1406
你如何存放未跟踪的文件？ 1287
获取对象类型的名称 1159
将文本粘贴到vim时关闭自动缩进 1119
自我的目的是什么？ 1061