4

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

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

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

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

谢谢！

4

4 回答 4

5

我使用 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属性列在优秀的 RaphaelJS 文档中。

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

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

我希望这有帮助！

于 2012-05-25T03:33:06.840 回答
2

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

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

沉肯尼建议

lineChart.lines[0].attr({"stroke": "#000"})
于 2011-01-19T21:55:38.477 回答
0

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

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

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

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

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

于 2011-01-09T20:29:14.700 回答