您的位置：首页 > 其它

raphael生成柱状图时横坐标显示文字说明

2014-12-09 21:32 423 查看

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="demo.css" media="screen">
<link rel="stylesheet" href="demo-print.css" media="print">
<script src="raphael.js"></script>
<script src="g.raphael.js"></script>
<script src="g.bar.js"></script>
<script>
window.onload = function () {
var r = Raphael("holder"),
fin = function () {
this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
},
fout = function () {
this.flag.animate({opacity: 0}, 300, function () {this.remove();});
},
fin2 = function () {
var y = [], res = [];
for (var i = this.bars.length; i--;) {
y.push(this.bars[i].y);
res.push(this.bars[i].value || "0");
}
this.flag = r.popup(this.bars[0].x, Math.min.apply(Math, y), res.join(", ")).insertBefore(this);
},
fout2 = function () {
this.flag.animate({opacity: 0}, 300, function () {this.remove();});
},
txtattr = { font: "12px sans-serif" };

r.text(160, 10, "单系列").attr(txtattr);
// r.text(480, 10, "多系列堆叠").attr(txtattr);
// r.text(160, 250, "多系列").attr(txtattr);
// r.text(480, 250, "多系列堆叠").attr(txtattr);

// var c =  r.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]]).hover(fin, fout);
r.barchart(10, 10, 550, 300, [
[5.5, 2.0, 7.6, 9.5]
]).hover(fin, fout)<span style="color:#FF0000;"><span style="color:#FF0000;">.<strong>label([['星期一','星期二','星期三','星期四']],true</strong>)</span></span>;
// r.hbarchart(330, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55]], {stacked: true}).hover(fin, fout);
// r.hbarchart(10, 250, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55]]).hover(fin, fout);
// var c = r.barchart(330, 250, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55]], {stacked: true, type: "soft"}).hoverColumn(fin2, fout2);
// c.label([["Uno", "Dos", "Tres", "Cuatro", "Cinco", "Seis", "Siete", "Ocho"]],true);
};
</script>
</head>
<body class="raphael" >
<div id="holder"></div>

</body>
</html>

加粗的部分是添加label显示文本的代码，效果图如下：

注：如果效果没有显示出来，并且报labeiles not function错，重新替换g.bar.js，下载地址 https://github.com/jhurt/g.raphael/blob/master/g.bar.js，OK。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航