2

キャンバスを使用して非常に単純な折れ線グラフを作成しました (Google アナリティクスからデータを取り込みます)。いくつかの小さな問題があります。まず、プロット ラインがギザギザです。

http://jsfiddle.net/uJQ7K/

私はこれに lineTo を使用しています：

ctx.lineTo((i*cellWidth) + cellWidth + padding,(tableHeight + padding) - data[i].v);

スプラインを使用するとこれを修正できると読みましたが、箱から出して直線を描く方法は確かにありますか?

私が抱えている他の問題は、strokeStyle のような 1 つの属性を変更すると、ページ上のすべてのストロークが変更されることです。グリッドの外観に影響を与えずにプロット ラインのストロークを変更するにはどうすればよいですか?

4

1 に答える 1

4

ラインキャップを変えてみましたか？

cxt.lineCap = 'ラウンド';

編集 -

ctx.beginPath(); を追加することにより ctx.lineCap の前に、より良い結果が得られます -

ctx.beginPath();
ctx.lineCap = 'round';

http://jsfiddle.net/uJQ7K/1/

于 2013-09-16T20:52:31.773 に答える