使用chart.js应该如何显示图例呢？

Question

尝试使用chart.js画Web图表，但是始终无法显示图例，设置legendTemplate也不行。谁知道该如何设置呢？

Answer 1

我的做法，js:

var myLineChart = new Chart(ctx).Line(data, options);
 document.getElementById('chart_line_legend').innerHTML =myLineChart.generateLegend();//显示图例

html:

<div class="chartbox" style="width: 100%">
    <canvas id="myChart"  style="height: 500px;width: 100%"></canvas>
    <div id="chart_line_legend" class="chart-legend"></div>
</div>

css:

.line-legend{
    padding: 0;
    width: 50%;
    margin-left: 25%;
    text-align: center;
}
.line-legend li{
    width: 50%;
    display: inline-block;
}
.line-legend span{
    width: 38%;
    height: 3px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
}

Answer 2

问题解决了吗？请问怎么添加图例？

Answer 3

需要修改源码，把 
legendTemplate 里的span标签中间加上空格，没有显示是因为 span 标签里没值，源码里有5个 legendTemplate 定义，记得都改了；另外，页面绑定的时候用 append() ，不要用示例给的 html()

Answer 4

不如你换一个图表插件，echart就非常不错。这个问题我没有找到解决办法，感觉是chart.js本身还有缺陷

Answer 5

我也碰到了这个问题，这个问题解决了没？