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();