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

F风向标F 发布于 2014/08/05 11:05
阅读 8K+
收藏 1
尝试使用chart.js画Web图表,但是始终无法显示图例,设置legendTemplate也不行。谁知道该如何设置呢?
加载中
0
lanceli
lanceli
我也碰到了这个问题,这个问题解决了没?
0
F风向标F
F风向标F
不如你换一个图表插件,echart就非常不错。这个问题我没有找到解决办法,感觉是chart.js本身还有缺陷
0
倾听者
需要修改源码,把  legendTemplate 里的span标签中间加上空格,没有显示是因为 span 标签里没值,源码里有5个 legendTemplate 定义,记得都改了;另外,页面绑定的时候用 append() ,不要用示例给的 html()
0
Shelock丶pk
Shelock丶pk
问题解决了吗?请问怎么添加图例?
0
飞翔的陈sir
飞翔的陈sir

我的做法,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;
}
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部