Javascript 图表JS图例样式

我已经创建了一个Chart JS Chart并单独生成了图例，这样我就可以把它移到聊天室的右侧——这一点很好，也很有效，但图例本身将它自己设计成一个标准的项目符号列表，用项目符号代替颜色键。标签生成时没有任何问题，我缺少的只是实际的彩色框

CSS:

JS:

//伪数据
风险值数据={
标签：[
“燃油消耗量（英里）”，
“行驶距离（英里）”，
“剩余距离（英里）”，
“燃料成本（英镑）”，
“驾驶时间（分钟）”
],
数据集：[
{
数据：[300,50,100,25,120]，
背景颜色：[
“#FF6384”，
“#36A2EB”，
“#FFCE56”，
“#F86301”，
“#FFFFFF”
],
悬停背景颜色：[
“#FF6384”，
“#36A2EB”，
“#FFCE56”，
“#F86301”，
“#FFFFFF”
]
}]
};
变量选项=
{
错误：错误，
动画片：对，
动画缩放：错误，
百分比内部断路器：50，
ToolTiptTemplate:“%”，
回答：错，
图例：{
显示：假
}
}
//今日图表
var today=document.getElementById（“today”）.getContext（“2d”）；
var myDoughnutChart=新图表（今天{
键入：“甜甜圈”，
数据：数据，
选项：选项
});
document.getElementById（'legend'）.innerHTML=myDoughnutChart.GenerateGend（）；

HTML:

这里有一个问题的中间部分：

---

这是固定装置。图例实际上是在创建颜色，但作为自定义图例，您必须编写一些css以解决问题

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

以下是工作代码：

//伪数据
风险值数据={
标签：[
“燃油消耗量（英里）”，
“行驶距离（英里）”，
“剩余距离（英里）”，
“燃料成本（英镑）”，
“驾驶时间（分钟）”
],
数据集：[
{
数据：[300,50,100,25,120]，
背景颜色：[
“#FF6384”，
“#36A2EB”，
“#FFCE56”，
“#F86301”，
“#FFFFFF”
],
悬停背景颜色：[
“#FF6384”，
“#36A2EB”，
“#FFCE56”，
“#F86301”，
“#FFFFFF”
]
}]
};
变量选项=
{
错误：错误，
动画片：对，
动画缩放：错误，
百分比内部断路器：50，
ToolTiptTemplate:“%”，
回答：错，
图例：{
显示：假
}
}
//今日图表
var today=document.getElementById（“today”）.getContext（“2d”）；
var myDoughnutChart=新图表（今天{
键入：“甜甜圈”，
数据：数据，
选项：选项
});
document.getElementById（'legend'）.innerHTML=myDoughnutChart.GenerateGend（）
.legend{
宽度：50%；
位置：绝对位置；
顶部：100px；
右：20px；
颜色：@浅；
字体系列：@family；
字体变体：小大写字母；
字号：@size+2；
}
.legend ul li{列表样式：无；}
.legend ul li span{宽度：50px；高度：15px；显示：内联块；右边距：5px；}

你能做一个有效的例子吗？请创建一个代码段，以及你想从代码段中做什么。请提供有效的fiddle或可运行的代码，以便我可以解决问题..用fiddle更新
 // 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();

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

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