当前位置：文江博客话题详情

在 gRaphael 中向条形图添加 x 轴和 y 轴？

发布于 2024-10-04 23:35:00 字数 109 浏览 7 评论 0原文

我想使用 gRaphael javascript 库创建条形图。 gRaphael 支持标记轴吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

默嘫て 2024-10-11 23:35:00

您也可以使用 axis 类来实现此目的：

            var chart = r.g.barchart(50,15,gW,167,  [ this.chart.Value ], { }).hover(fin, fout);
            var aX = chart.bars[0][0].x;
            var aW = chart.bars[0][chart.bars[0].length -1].x - aX;
            var axis = r.g.axis(aX,180,aW ,null,null,this.chart.Labels.length - 1  ,2, this.chart.Labels , "|", 0);
            axis.text.attr({font:"12px Arial", "font-weight": "regular", "fill": "#FFFFFF"});

You could work with the axis class as well for this :

            var chart = r.g.barchart(50,15,gW,167,  [ this.chart.Value ], { }).hover(fin, fout);
            var aX = chart.bars[0][0].x;
            var aW = chart.bars[0][chart.bars[0].length -1].x - aX;
            var axis = r.g.axis(aX,180,aW ,null,null,this.chart.Labels.length - 1  ,2, this.chart.Labels , "|", 0);
            axis.text.attr({font:"12px Arial", "font-weight": "regular", "fill": "#FFFFFF"});

回复收藏 0 原文

逐鹿 2024-10-11 23:35:00

[我知道这个问题很旧，但这是我的解决方案 -]

我没有设法使用 rgaxis，但我使用了 aX -

  var x, y = 250;
  for (i = 0; i < MAX_ITEMS; i++) {
    x = chart.bars[0][i].x;
    r.text(x, y, "[" + i + "]").attr(txtattr);
  }

[I am aware that this question is old, but here is my solution -]

I did not manage to use the r.g.axis, but I used the aX -

  var x, y = 250;
  for (i = 0; i < MAX_ITEMS; i++) {
    x = chart.bars[0][i].x;
    r.text(x, y, "[" + i + "]").attr(txtattr);
  }

回复收藏 0 原文

初心 2024-10-11 23:35:00

我在此示例中看到了一些轴，尽管没有标签。我认为您可以使用 Raphael 函数 text() 将文本添加到所需位置。

var t = paper.text(50, 50, "X Label");

I see some axis although without labels in this example. I think you can add text to a desired position using Raphael function text().

var t = paper.text(50, 50, "X Label");

回复收藏 0 原文

兮颜 2024-10-11 23:35:00

对于 Y 轴，我添加了另一个栏，其中包含我要标记的步骤。
我想你可以将其颜色设置为“透明”。

var myArrY = new Array ();                    // original values                     
// TODO: fill its values as before . . .

var myArrY_steps = new Array(0, 10, 20, 30);  // the steps I want to mark

var myData = new Array ();                     
 myData[0] = myArrY;
 myData[1] = myArrY_steps;   
 var chart = r.barchart(10, 10, 600, 300, myData, 0, {type: "sharp"});
. . . 
 var x = 10;
 var y;
 for (i = 0; i < myArrY_steps.length; i++) {
   // Note: In this loop I use chart.bars[1], the steps array!
   y = chart.bars[1][i].y;                    // calculated by gRaphael !
   r.text(x, y, chart.bars[1][i].value).attr(txtAttr);  
 }

and for the Y-axis, I added another bar, with the steps I want to mark.
I guess you can set its color to "transparent".

var myArrY = new Array ();                    // original values                     
// TODO: fill its values as before . . .

var myArrY_steps = new Array(0, 10, 20, 30);  // the steps I want to mark

var myData = new Array ();                     
 myData[0] = myArrY;
 myData[1] = myArrY_steps;   
 var chart = r.barchart(10, 10, 600, 300, myData, 0, {type: "sharp"});
. . . 
 var x = 10;
 var y;
 for (i = 0; i < myArrY_steps.length; i++) {
   // Note: In this loop I use chart.bars[1], the steps array!
   y = chart.bars[1][i].y;                    // calculated by gRaphael !
   r.text(x, y, chart.bars[1][i].value).attr(txtAttr);  
 }

回复收藏 0 原文

~没有更多了~