4

文書化されていないラファエル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}）;

線の1つを変更して、塗りつぶし=クリア、ストローク=色に設定したい

私はこのようなことがうまくいくと言われましたが、運がありません-何か提案はありますか？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
    • 各行に1つずつ、一連​​のパスオブジェクトにアクセスします
  • データポイントをマークするシンボル（または存在しない場合は空の配列）にアクセスするには：lineChart.symbols
    • セットのセットにアクセスします。各セットには、1行のシンボルが格納されています。
  • 軸線にアクセスするには：lineChart.axis
    • 各軸線に1つずつ、一連​​のパスにアクセスします。各軸は1つのパスであり、パスの迂回として目盛りが付いているように見えます。個々の軸にアクセスするには、どの軸を表示するか（上、右、下、左）を設定したのと同じ順序ですが、設定されている数だけになります。したがって、下の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テキストオブジェクトのセットにアクセスします。軸線とテキストに同じ変更を加えるには、両方のセットに別々にアクセスする必要があるようです。
于 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では）、塗りつぶし属性の値をURLに設定し、IDを指します。次に、そのIDを使用してlinearGradient要素を作成します。グラデーションの書き方のこの例を参照してください。SVGでもストロークの値をグラデーションに設定することもできます。

于 2011-01-09T20:29:14.700 に答える