javascript - Chart JS 图例样式

Question

我创建了一个 Chart JS 图表并单独生成了图例，以便我可以将其移动到聊天的右侧 - 这一点很好并且可以工作，但图例本身已将其自身设计为标准元素符号列表元素符号点代替颜色键。标签已生成，没有任何问题，只是我缺少实际的彩色框。

CSS:

.legend {
   width: 50%;
   position: absolute;
   top: 100px;
   right: 20px;
   color: @light;
   font-family: @family;
   font-variant: small-caps;
   font-size: @size + 2;
}

JS:

 // Dummy Data
    var data = {
        labels: [
            "Fuel Consumption (Miles)",
            "Distance Travelled (Miles)",
            "Distance Remaining (Miles)",
            "Fuel Cost (Pounds)",
            "Time Driving (Minutes)"
        ],
        datasets: [
            {
                data: [300, 50, 100, 25, 120],
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#F86301",
                    "#FFFFFF"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#F86301",
                    "#FFFFFF"
                ]
            }]
    };

    var options = 

{
    segmentShowStroke: false,
    animateRotate: true,
    animateScale: false,
    percentageInnerCutout: 50,
    tooltipTemplate: "<%= value %>%",
    responsive: false,
    legend: {
        display:false
    }
}

// Today's Chart
var today = document.getElementById("today").getContext("2d");
var myDoughnutChart = new Chart(today, {
    type: 'doughnut',
    data: data,
    options: options
});

document.getElementById('legend').innerHTML = myDoughnutChart.generateLegend();

HTML:

<canvas id="today" style="width: 40%;"></canvas>
<div id="legend" class="legend"></div>

这是该问题的 JSFiddle: https://jsfiddle.net/WebDevelopWolf/kbqa8fcz/

Answer 1

这是固定装置。图例实际上是在创建颜色，但由于它是自定义图例，因此您必须编写一些 css 来解决问题。

.legend ul li{list-style:none;}
.legend ul li span{ width:50px; height:15px;display:inline-block; margin-right:5px; }

Below is the working code:

// Dummy Data
    var data = {
        labels: [
            "Fuel Consumption (Miles)",
            "Distance Travelled (Miles)",
            "Distance Remaining (Miles)",
            "Fuel Cost (Pounds)",
            "Time Driving (Minutes)"
        ],
        datasets: [
            {
                data: [300, 50, 100, 25, 120],
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#F86301",
                    "#FFFFFF"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56",
                    "#F86301",
                    "#FFFFFF"
                ]
            }]
    };

    var options = 

{
    segmentShowStroke: false,
    animateRotate: true,
    animateScale: false,
    percentageInnerCutout: 50,
    tooltipTemplate: "<%= value %>%",
    responsive: false,
    legend: {
        display:false
    }
}

// Today's Chart
var today = document.getElementById("today").getContext("2d");
var myDoughnutChart = new Chart(today, {
    type: 'doughnut',
    data: data,
    options: options
});

document.getElementById('legend').innerHTML = myDoughnutChart.generateLegend();

.legend {
   width: 50%;
   position: absolute;
   top: 100px;
   right: 20px;
   color: @light;
   font-family: @family;
   font-variant: small-caps;
   font-size: @size + 2;
}
.legend ul li{list-style:none;}
.legend ul li span{ width:50px; height:15px;display:inline-block; margin-right:5px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<canvas id="today" style="width: 40%;"></canvas>
<div id="legend" class="legend"></div>