Как вы можете получить доступ и стиль отдельной линии в линейной диаграмме Г. Рафаэля - PullRequest
Новая
       25

Как вы можете получить доступ и стиль отдельной линии в линейной диаграмме Г. Рафаэля

4 голосов
/ 06 января 2011

Из-за очень плохо документированной библиотеки 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 ({штрих: "# 000"}),

для дополнительного кредита, как я могу установить градиентные заливки линии?

спасибо!

Ответы [ 4 ]

5 голосов
/ 25 мая 2012

Я использовал 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'});

Надеюсь, это поможет!

2 голосов
/ 12 марта 2012

Вот некоторые вещи, которые я нашел методом проб и ошибок. Буду обновлять, как я узнаю больше. Как вы говорите, было бы намного лучше, если бы у gRaphael действительно была документация, похожая на реальный проект ... хотя кажется, что она была недавно передана, так что, надеюсь, все изменится.

  • Чтобы получить доступ к строкам линейного графика: lineChart.lines
    • Доступ к набору объектов пути, по одному для каждой строки
  • Для доступа к символам , обозначающим точки данных (или пустой массив, если таковых нет): lineChart.symbols
    • Доступ к набору наборов, каждый набор содержит символы для одной строки
  • Для доступа к осевым линиям : lineChart.axis
  • Чтобы получить доступ к текстовым меткам оси : lineChart.axis[n].text (где n - номер нужной оси, как указано выше)
    • Доступ к набору текстовых объектов Рафаэля. Для того, чтобы сделать одно и то же изменение линий оси и текста, кажется, что вам нужно получить доступ к обоим наборам по отдельности.
1 голос
/ 20 января 2011

Кенни Шен советует 

lineChart.lines[0].attr({"stroke": "#000"})
0 голосов
/ 09 января 2011

Я не использовал Raphäel, но вы должны иметь возможность установить прозрачную заливку и задать цвет обводки.Если у элемента SVG есть идентификатор или класс, вы можете установить его с помощью CSS: 

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

В противном случае вы можете использовать path:nth-of-type(), чтобы выбрать элемент, или выбрать элемент, как если бы выдругой в JS и установите атрибуты обводки и заливки.

У вас есть nostroke: true в коде выше.Я не уверен, что это мешает ему работать так, как вы ожидали.

Чтобы установить градиент (по крайней мере, в реальном SVG), вы устанавливаете значение атрибута fill в url, указывая на id.Затем вы создаете элемент linearGradient с этим идентификатором.См. этот пример о том, как писать градиенты.Вы также можете установить значение обводки для градиента в SVG.

...