1

次のコードを使用して HTML5 キャンバス チャートを描画しています。

<canvas id="myChart" width="400" height="400"></canvas>

var ctx =  $("#myChart").get(0).getContext("2d");
ctx.beginPath();
ctx.arc(200,200,scaleAnimation * doughnutRadius,cumulativeAngle,cumulativeAngle + segmentAngle,false);
ctx.arc(width/2,height/2,scaleAnimation * cutoutRadius,cumulativeAngle + segmentAngle,cumulativeAngle,true);
ctx.closePath();
ctx.fillStyle = data[i].color;
ctx.fill();
cumulativeAngle += segmentAngle;

必須ではないため、すべての変数宣言をここに含めていません。これにより、基本的にドーナツ チャートが作成されます。こちらのmorris.jsで作ったチャートのように、チャートをレスポンシブにしたいです。

つまり、さまざまなセグメントにカーソルを合わせると、値とラベルが表示されます。jsbin の例では、実装が異なります。HTML5キャンバス要素を使用するときに同じことができますか?

4

0 に答える 0