Chart.JS円グラフの凡例の配置と外観を制御するにはどうすればよいですか？

Question

このコードで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）でなければなりません）

個々の要素をそれぞれのデータポイントの色と一致させるにはどうすればよいですか？

更新

公式ドキュメントの「Legend Label Configuration」トピック 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());

[〜＃〜] note [〜＃〜]：これを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、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>

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 をコピーしました。

変更したのは、2つのCSSクラスの名前（「テーブル」が「legendTable」に、「セル」が「legendCell」になった）と、テーブルの境界線の色が赤から森林緑になっただけです。

Chart.JS CSSファイルなどを参照する必要もありますか？

Answer 1

これは、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());

私は「多かれ少なかれ」と言います。なぜなら、パイの断片はいまだに哀れだからです

Answer 2

私はこれをあなたが望むと思う：[〜＃〜] 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>
        <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;
}

Answer 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>