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

Question

由于 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, "colors":["#44F","#CCC"], nostroke:true});

我想更改其中一条线以设置填充 = 清除和描边 = 颜色

有人告诉我这样的事情会奏效，但没有运气 - 有什么建议吗？ lineChart.lines[0].attr({stroke: "#000"}),

为了获得额外的功劳，如何将线条的填充设置为渐变？

谢谢！

Answer 1

我使用 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});

line-width 属性列在the excellent RaphaelJS documentation 中。

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

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

我希望这会有所帮助！

Answer 2

以下是我通过反复试验发现的一些内容。当我发现更多时会更新。正如你所说，如果 gRaphael 真的有像真正项目一样的文档会更好......虽然它似乎最近已经移交，所以希望事情会有所改变。

• 要访问折线图的线条：lineChart.lines
  • 访问一组路径对象，每行一个
• 要访问 symbols 标记数据点（如果没有，则为空数组）：lineChart.symbols
  • 访问一组集合，每个集合包含一行的符号
• 要访问轴线：lineChart.axis
  • 访问一组路径，每条轴线一个。看起来每个轴都是一条路径，刻度线作为路径上的转移。要访问单个轴，它们位于same order as how you set which axis are visible (top, right, bottom, left) 中，但只有设置的数量。因此，如果您有底部 X 和左侧 Y ({axis: "0 0 1 1"})，那么 axis[0] 将是 X 轴，axis[1] 是 Y。如果您有左侧、底部和右侧，则右侧将是 @987654328 @，下axis[1]，左axis[2]等
• 要访问轴文本标签：lineChart.axis[n].text（其中 n 是您想要的轴的编号，如上所述）
  • 访问一组 Raphael 文本对象。要对轴线和文本进行相同的更改，您似乎需要分别访问这两个集合。

Answer 3

kenny shen 建议

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

Answer 4

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

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

否则，您可以使用path:nth-of-type() 来选择元素，或者像在 JS 中一样选择元素并设置描边和填充属性。

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

要设置渐变（至少在真正的 SVG 中），您需要将 fill 属性的值设置为 url，指向一个 id。然后使用该 ID 创建一个 linearGradient 元素。请参阅this example 了解如何编写渐变。您也可以在 SVG 中将描边的值设置为渐变。