chart.js增加图例的简单方法

1.由于我用的chart.js版本是1.0.2

调用

  var bar=new_chart.Bar(data)
  var legend=bar.generateLegend();

只能生成空的内容，不可行

chart.js的最新版本2.2.2。要么用最新的版本，要么就用笨的方法。

稍后用最新的版本，写个小case

一种就是用Chart.prototype.addLegend=function()

自己写一个，估计写完天都黑了。

那就用一种土方法吧

2.CSS直接写就可以了。

如果是Ajax请求数据，在生成图例的话，就写一个小函数。如果是已有数据

就自己布局，很快的

HTML:

<div class="drawing-container">
			<canvas id="drawing" width="800" height="800"></canvas>

			<ul>
				<li>Tom</li>
				<li>Lucy</li>
				<li>Jimmy</li>
				<li>Lucian</li>
				<li>Kim</li>
			</ul>
		</div>

CSS:

ul{
    position:absolute;
    right:20px;
    top:10px;
}

ul li{
    padding:5px 10px;
    margin-top:5px;
    text-align:center;
    color:white;
}

ul li:nth-child(1){
    background-color:#ff6384;
}

ul li:nth-child(2){
    background-color:#36a2eb;
}

ul li:nth-child(3){
    background-color:#ffce56;
}

ul li:nth-child(4){
    background-color:#4bc0c0;
}

ul li:nth-child(5){
    background-color:#4e6ca9;
}

</pre><pre name="code" class="javascript">function drawBarChart(){
	var drawing=document.getElementById("drawing");
	if(!drawing.getContext) return false;
	var ctx=drawing.getContext("2d");

	var new_chart = new Chart(ctx);
	console.log(new_chart);
	var data = [
	{
		value: 30,
		color:"#ff6384"
	},
	{
		value : 50,
		color :"#36a2eb"
	},
	{
		value : 100,
		color : "#ffce56"
	},
	{
		value : 40,
		color : "#4bc0c0"
	},
	{
		value : 120,
		color :"#4e6ca9"
	}

]
	new_chart.Doughnut(data);
}

drawBarChart();