How can I control the placement of my Chart.JS pie chart's legend, as well as its appearance?

前端 未结 3 1077
眼角桃花
眼角桃花 2021-02-05 07:01

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

HTML

相关标签:
3条回答
  • 2021-02-05 07:19

    As @B.ClayShannon mentioned, version 2 is quite a bit different than verison 1. Here is an example of how to customize the legend template using version 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},
    }
    

    It's not shown directly in the accepted solution above, but to render your legend elsewhere you'll want to call:

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

    Finally, some HTML to pull it together (note clearfix is a Bootstrap class that :

    <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>
    
    0 讨论(0)
  • 2021-02-05 07:28

    I think this what you want: DEMO

    First, you need to make canvas responsive by overriding fixed width and height and wrap it in additional div that can be used for positioning. I used display: table for centering elements but setting inner divs to inline-block also works if you wish for chart and legend to take different amount of space than 50:50.

    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: Did some adjustment based on additional information by 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;
    }
    
    0 讨论(0)
  • 2021-02-05 07:34

    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:

    0 讨论(0)
提交回复
热议问题