我按照this示例使用了chart.js。
我的传说是在每个传奇项目旁边显示要点,我不知道为什么。在多个浏览器中发生。这是我得到的图像:
我试图添加“list-style-type:none;”进入css,但这对我没有任何影响。
有什么想法吗? JSFiddle代码如下:
**html**
<div style="width: 100%; height: 100%;">
<canvas id="myChart" style="width: 100%; height: auto;"></canvas>
</div>
<div id="js-legend" class="chart-legend"></div>
**js**
var data = [
{
value: 61,
color: "#09355C",
label: "Label 1"
}, {
value: 11,
color: "#CBCBCB",
label: "Label 2"
}, {
value: 28,
color: "#B61B12",
label: "Label 3"
}];
var options = {
segmentShowStroke: false,
animateRotate: true,
animateScale: false,
percentageInnerCutout: 50,
tooltipTemplate: "<%= value %>%"
}
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx).Doughnut(data, options);
document.getElementById('js-legend').innerHTML = myChart.generateLegend();
**css**
.chart-legend li span{
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;
}
答案 0 :(得分:1)
您需要将list-style-type: none;
添加到li
元素,例如
.chart-legend li {
list-style-type: none;
}
您当前的CSS规则集定位.chart-legend li span
- 添加list-style-type: none;
无效。