我想知道如何制作一个简单的条形图，它可能以天为 x 轴，值为“今天”和“昨天”，y 轴可能为“时间”，对应值为“1”和“2”。我想我对如何将文本设置为 x 轴的值、如何显示 y 轴以及 r.g.axis 的作用感到困惑……
（我找到了一个使用axis = r.g.axis(0,300,400,0,500,8,2) 的示例，我只知道它是xpos、ypos、width、??、?? num ticks、??）。任何见解都会很棒！或具有更全功能条形图示例（标签等）的页面。谢谢。
【问题讨论】：
为了所有在谷歌上搜索的人：
r.g.axis(x_start, y_start, x_width, from, to, steps, orientation, labels, type, dashsize)
x_start和y_start：轴文字到左下角的距离
x_width：文本末尾沿x轴的位置
from 和 to：用于指定和使用范围，而不是使用标签参数
steps：是刻度数 - 1
方向：似乎指定 x 轴与 y 轴
type：是使用的刻度线的类型。
这一切都是从source code 推导出来的。我想我现在要切换到带有文档的图表库...
【讨论】：
当前代码 (Raphaeljs 2.0) 已更改，必须稍作调整以使用 Raphael.g.axis 而不是 r.g.axis：
Raphael.g.axis(85,230,310,null,null,4,2,["今天", "昨天", "明天", "未来"], "|", 0, r)
【讨论】：
你在正确的轨道上。您使用 g.axis 并在“文本”参数（位置）中找到用于设置文本的位置参数，并使用“方向”参数切换 y。我这里加了一个例子，
【讨论】：
阅读此问答和一打类似的内容后，我仍然无法让 gRaphaël 为条形图显示正确的标签。这些食谱似乎都引用了旧版本的库，或者不再存在的 github 页面。 gRaphaël 产生了一些漂亮的输出——但它的文档还有很多不足之处。
然而，我能够结合使用 Firebug 和 Inspect This Element 来跟踪代码并查看它产生了什么。深入到条形图对象中，所需的几何图形就在那里。为了避免其他人感到沮丧，这是我解决问题的方法：
<script>
function labelBarChart(r, bc, labels, attrs) {
// Label a bar chart bc that is part of a Raphael object r
// Labels is an array of strings. Attrs is a dictionary
// that provides attributes such as fill (text color)
// and font (text font, font-size, font-weight, etc) for the
// label text.
for (var i = 0; i<bc.bars.length; i++) {
var bar = bc.bars[i];
var gutter_y = bar.w * 0.4;
var label_x = bar.x
var label_y = bar.y + bar.h + gutter_y;
var label_text = labels[i];
var label_attr = { fill: "#2f69bf", font: "16px sans-serif" };
r.text(label_x, label_y, label_text).attr(label_attr);
}
}
// what follows is just setting up a bar chart and calling for labels
// to be applied
window.onload = function () {
var r = Raphael("holder"),
data3 = [25, 20, 13, 32, 15, 5, 6, 10],
txtattr = { font: "24px 'Allerta Stencil', sans-serif", fill: "rgb(105, 136, 39)"};
r.text(250, 10, "A Gratuitous Chart").attr(txtattr);
var bc = r.barchart(10, 10, 500, 400, data3, {
stacked: false,
type: "soft"});
bc.attr({fill: "#2f69bf"});
var x = 1;
labelBarChart(r, bc,
['abc','b','card','d','elph','fun','gurr','ha'],
{ fill: "#2f69bf", font: "16px sans-serif" }
);
};
</script>
<div id="holder"></div>
您可以对labelBarChart() 进行一些小清理，但这基本上可以完成工作。
【讨论】：
var x = 1; 没有任何功能用途。我相信这只是一个“无操作”语句，以便在设置阶段和标记工作之间为调试器断点提供一个方便的位置。
这是我为添加标签而编写的函数。它不是特别优雅，但会添加标签：
Raphael.fn.labelBarChart = function(x_start, y_start, width, labels, textAttr) {
var paper = this;
// offset width and x_start for bar chart gutters
x_start += 10;
width -= 20;
var labelWidth = width / labels.length;
// offset x_start to center under each column
x_start += labelWidth / 2;
for ( var i = 0, len = labels.length; i < len; i++ ) {
paper.text( x_start + ( i * labelWidth ), y_start, labels[i] ).attr( textAttr );
}
};
用法如下：
var paper = Raphael(0, 0, 600, 400);
var chart = paper.barchart(0, 0, 600, 380, [[63, 86, 26, 15, 36, 62, 18, 78]]);
var labels = ['Col 1', 'Col 2', 'Col 3', 'Col 4', 'Col 5', 'Col 6', 'Col 7', 'Col 8'];
paper.labelBarChart(0, 390, 600, labels, {'font-size': 14});
【讨论】：
我想针对Jonathan Eunice提出的labelBarChart函数问题提出一个解决方案。 考虑到堆叠的条形图（或其他具有多个值数组的条形图），我在 bc.bars[0] 上添加了一个测试，以防 bc.bars.length 表示堆叠的值数组的数量。
这导致代码：
<script>
function labelBarChart(r, bc, labels, attrs) {
// Label a bar chart bc that is part of a Raphael object r
// Labels is an array of strings. Attrs is a dictionary
// that provides attributes such as fill (text color)
// and font (text font, font-size, font-weight, etc) for the
// label text.
//Added test : replace bc.bars by generic variable barsRef
var barsRef = (typeof bc.bars[0].length === 'undefined') ? bc.bars : bc.bars[0];
var bar, gutter_y, label_x, label_y, label_text;
//Added consideration of set attrs (if set)
var label_attr = (typeof attrs === 'undefined') ? {} : attrs;
label_attr['fill'] = (typeof label_attr['fill'] === 'undefined') ? "#2f69bf" : label_attr['fill'];
label_attr['font'] = (typeof label_attr['font'] === 'undefined') ? "16px sans-serif" : label_attr['font'];
for (var i = 0; i<barsRef.length; i++) {
bar = barsRef[i];
gutter_y = bar.w * 0.4;
label_x = bar.x
label_y = bar.y + bar.h + gutter_y;
label_text = labels[i];
r.text(label_x, label_y, label_text).attr(label_attr);
}
}
// what follows is just setting up a bar chart and calling for labels
// to be applied
// I added an array of data to illustrate : data4
window.onload = function () {
var r = Raphael("holder"),
data3 = [25, 20, 13, 32, 15, 5, 6, 10],
data4 = [0, 2, 1, 40, 1, 65, 46, 11],
txtattr = { font: "24px 'Allerta Stencil', sans-serif", fill: "rgb(105, 136, 39)"};
r.text(250, 10, "A Gratuitous Chart").attr(txtattr);
var bc = r.barchart(10, 10, 500, 400, [data3, data4] {
stacked: true,
type: "soft"});
bc.attr({fill: "#2f69bf"});
labelBarChart(r, bc,
['abc','b','card','d','elph','fun','gurr','ha'],
{ fill: "#2f69bf", font: "16px sans-serif" }
);
};
</script>
<div id="holder"></div>我刚刚用 2 个堆叠的值数组对其进行了测试。
【讨论】：