3

flotchart.org を使用して、デフォルトの「円」形状をポイントを表すために置き換えたいと思います。同様の円で、シリーズの色で塗りつぶされています。例として、特定のシリーズに関連付けられた色「赤」を使用します。私が表現したいシンボルは、HTML5 キャンバス API を使用したものです。

var ctx=c.getContext("2d");ctx.beginPath(); ctx.arc(100,75,3,0,2*Math.PI); ctx.fillStyle="red"; ctx.fill();

しかし、フローチャートのドキュメントで提案されているものをコーディングして、結果を得ることができません。

上記のドキュメントで提案されているように、オプションでカスタム関数を作成しました。

          points: {
            show: true,
            radius: 2,
            symbol: 
                function fullCircle(ctx, x, y, radius, shadow) {        
                    ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false);
                    ctx.fill();
                },

ctx.fill は希望どおりに機能しません: 円は BLACK 色で塗りつぶされ、ポイントした直後に、ポイントに焦点を合わせる前に、対応するシリーズに関連付けられた色で円を塗りつぶしたいと思います...

canvas ctxについて無知で申し訳ありません...

4

1 に答える 1

1

ドキュメンテーションhttps://github.com/flot/flot/blob/master/API.mdから引用されたシリーズ ポイントを表すために塗りつぶされた円 (ディスク) を描画する flot 設定の組み合わせがあります。

「塗りつぶし」は、形状を塗りつぶすかどうかです。線の場合、これにより面グラフが生成されます。「fillColor」を使用して、塗りつぶしの色を指​​定できます。 「fillColor」が false (白で塗りつぶされた点を除くすべてのデフォルト) と評価された場合、塗りつぶしの色はデータ系列の色に自動設定されます。"fill" を 0 (完全に透明) から 1 (完全に不透明) までの数値に設定することで、塗りの不透明度を調整できます。

そのため、series.points.fillColorオプションをfalse（シリーズの色を使用するか、好きな色に）設定するだけです。そして完全series.points.fillに1不透明にします。フィドルで遊んでください。

ここにJsFiddleがあります。

于 2013-09-19T07:12:44.667 に答える