ChartJS 图例不排队

Question

我正在为使用 ChartJS 生成的折线图创建图例。我运行遇到的问题是图例中的颜色框没有正确排列。以下是我如何生成图例：

var chartLegend = "<ul style=\"list-style-type: none;\">";
for(var i = 0; i < chartDatas.datasets.length; i++)
{
    chartLegend += "<li><div style=\"background-color:" + chartDatas.datasets[i].pointColor + ";height:20px; width:20px; float:left; margin:5px;\"></div>" + chartDatas.datasets[i].label + "</li>"
}

chartLegend += "</ul>";

Here is the full code

箱子可以排成一行吗？

Answer 1

var chartLegend = "<ul style=\"list-style-type: none; padding:    0\">";
for(var i = 0; i < chartDatas.datasets.length; i++)
{
        chartLegend += "<li><span style=\"background-color:" + chartDatas.datasets[i].pointColor + ";height:20px; width:20px; display:inline-table; margin:5px;\"></span>" + chartDatas.datasets[i].label + "</li>"
}

demo

ChartJS 图例不排队

ChartJS Legend Not Lining Up

javascript

chart.js