Question

由于raphael JS库的记录很少，我恳求集体智慧。

我有工作。 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}）;

我想更改其中一行以设置fill = clear和stroke = a color

我被告知这样的事可行，但没有运气 - 有什么建议吗？ 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中列出了chart.lines[0].attr({'fill': 'none', 'stroke': '#FF00FF'});属性。

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

{{1}}

我希望这有帮助！

Answer 2

以下是我通过反复试验找到的一些内容。将在我发现更多时更新。正如你所说，如果gRaphael实际上有像真实项目这样的文档会好得多......虽然它似乎最近被移交了所以希望事情会发生变化。

访问折线图的行：lineChart.lines
- 访问一组路径对象，每行一个
访问符号标记数据点（如果没有，则访问空数组）：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.如果你有一个左，下，右，权利将是axis[0]，底部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属性的值设置为指向id的url。然后，您可以使用该ID创建linearGradient元素。请参阅this example如何编写渐变。您也可以在SVG中将笔画的值设置为渐变。

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

4 个答案: