如何访问 G. Raphael 折线图中的单条线并设置其样式

发布于 2024-10-10 09:46:28 字数 484 浏览 8 评论 0原文

由于 raphael JS 库的文档非常少，我恳求集体智慧。

我有一个工作g。 raphael 多线折线图（类似于 http://g.raphaeljs.com/linechart.html）

类似： var lineChart = rglinechart(10,10,300,220,[1,2,3,4,5],[[10,20,15,35,30],[5,10,5,15,20]], {阴影: true, "颜色":["#44F","#CCC"], nolines:true});

我想更改其中一行来设置填充 = 清除和描边 = 颜色

我被告知这样的东西可以工作，但没有运气 - 有什么建议吗？ lineChart.lines[0].attr({lines: "#000"})，

额外加分，如何将线条的填充设置为渐变？

谢谢！

原文

分享到QQ

分享到微博

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

发布评论

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

圈圈圆圆圈圈 2024-10-17 09:46:28

我使用 Firebug 和 console.log() 列出一行上的属性：

console.log(chart.lines[0].attr());

我单击日志行以查看详细信息，如下所示：

fill: "none"
path: [ ... ]
stroke: "#ff0000"
stroke-dasharray: ""
stroke-linecap: "round"
stroke-linejoin: "round"
stroke-width: 2
transform: []

对于我来说，我想更改笔画宽度。此代码有效：

chart.lines[0].attr({'stroke-width': 8});

优秀的 RaphaelJS 文档中列出了 line-width 属性。

对于您的问题，我希望您需要这样的代码：

chart.lines[0].attr({'fill': 'none', 'stroke': '#FF00FF'});

我希望这有帮助！

I used Firebug and console.log() to list the attributes on a line:

console.log(chart.lines[0].attr());

I clicked on the log line to see the details, like this:

fill: "none"
path: [ ... ]
stroke: "#ff0000"
stroke-dasharray: ""
stroke-linecap: "round"
stroke-linejoin: "round"
stroke-width: 2
transform: []

For me, I wanted to change the stroke-width. This code works:

chart.lines[0].attr({'stroke-width': 8});

The line-width attribute is listed in the excellent RaphaelJS documentation.

For your problem, I expect you need code like this:

chart.lines[0].attr({'fill': 'none', 'stroke': '#FF00FF'});

I hope this helps!

回复收藏 0 原文

樱花落人离去 2024-10-17 09:46:28

以下是我通过反复试验发现的一些事情。当我发现更多时会更新。正如你所说，如果 gRaphael 实际上拥有像真实项目一样的文档，那就更好了……尽管它似乎最近已经移交，所以希望事情会有所改变。

要访问折线图的线条：lineChart.lines
- 访问一组路径对象，每行一个路径对象
要访问符号标记数据点（如果没有，则为空数组）：lineChart.symbols
- 访问一组集合，每组包含一行符号
要访问轴线：lineChart.axis
- 访问一组路径，每条轴线对应一个路径。看起来每个轴都是一条路径，刻度线作为路径上的分流。要访问单个轴，它们位于与设置可见轴的顺序相同（上、右、下、左），但只会有设置的数量。因此，如果您有一个底部 X 和一个左侧 Y ({axis: "0 0 1 1"})，那么 axis[0] 将是 X 轴，< code>axis[1] Y。如果有左、下、右，右将是 axis[0],bottom axis[1]、左axis[2]等
要访问轴文本标签：lineChart.axis[n].text（其中 n是您想要的轴的编号，如上所述）
- 访问一组 Raphael 文本对象。要对轴线和文本进行相同的更改，似乎您需要单独访问这两个集合。

回复收藏 0 原文

无声无音无过去 2024-10-17 09:46:28

肯尼·沉建议

lineChart.lines[0].attr({"stroke": "#000"})

kenny shen advises

lineChart.lines[0].attr({"stroke": "#000"})

回复收藏 0 原文

冧九 2024-10-17 09:46:28

我没有使用 Raphäel，但您应该能够将填充设置为透明并为描边设置颜色。如果 SVG 元素有 ID 或类，那么您应该能够通过 CSS 进行设置：

#id {
  stroke: colour;
  fill: none;
}

否则，您可以使用 path:nth-of-type() 来选择该元素，或者选择该元素就像你在 JS 中的任何其他操作一样，设置描边和填充属性。

上面的代码中有 norinkle: true 。我不确定这是否会阻止它按您的预期工作。

要设置渐变（至少在真实的 SVG 中），请将 fill 属性的值设置为指向 id 的 url。然后，您可以使用该 ID 创建一个 LinearGradient 元素。请参阅此示例了解如何编写渐变。您还可以在 SVG 中将笔画的值设置为渐变。

I've not used Raphäel, but you should be able to set the fill to transparent and set a colour to the stroke. If the SVG element has an ID or class then you should be able to set this via CSS:

#id {
  stroke: colour;
  fill: none;
}

Otherwise, you could use path:nth-of-type() to select the element, or select the element like you would any other in JS and set the stroke and fill attributes.

You have nostroke: true in the code above. I'm not sure if that is stopping it from working as you expected.

To set a gradient (at least in real SVG) you set the value of the fill attribute to a url, pointing to an id. You then create a linearGradient element with that ID. See this example of how to write gradients. You can also set the value of a stroke to a gradient too in SVG.

回复收藏 0 原文

~没有更多了~