キャンバスダイナミックチャート

はじめに

canvas 強力な機能により、HTML5 の非常に重要な部分となりますが、それが何であるかについては、ここで紹介する必要はありません。ビジュアル チャートは、キャンバスの強力な機能を表現したものの 1 つです。

現在、Canvas を使用して実装される成熟したチャート プラグインが多数あり、Chart.js などは美しくクールなチャートを作成でき、ほぼすべてのチャート実装をカバーします。

ヒストグラムを描きたいときもありますが、自分で書くのは面倒ですし、他の人のプラグインを使用するのも面倒です。最後に、Baidu を開いてコードをコピーし、貼り付けて修正します。自分で手に取ってみてもいいかもしれません。

エフェクト

アニメーションエフェクト画像は表示できません。一番下に移動してデモアドレスを見つけることができます

分析

はい、このチャートはxy軸、データバー、タイトルで構成されています。

• Axis: moveTo() と lineTo() を使用して実装できます

• Text: fillText() を使用して実装できます

• Rectangle: fillRect() を使用して

を実装できますどうやらそうではないようです そんなに難しいことではありません。

実装

canvas定義

<canvas id="canvas" width="600" height="500"></canvas>

canvasタグは単なるコンテナであり、描画の実際の実装はJavaScriptです。

座標軸を描く

座標軸は2本の横線であり、キャンバスの最も基礎的な知識です。 E ctx.beginpath() から新しいパスを開始します

• CTX.LI

  New
Idth = 1 線の幅を設定します

• CTX.Strokestyle = '#000000' 線の色を設定します

• ctx.moveTo( x,y) は線の始点を定義します

• ctx.lineTo(x1,y1) は線の終点を定義します

• 最後に ctx.ストローク() は始点と終点を結びますline

var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var width = canvas.width;var height = canvas.height;var padding = 50;       // 坐标轴到canvas边框的边距，留边距写文字ctx.beginPath();ctx.lineWidth = 1;// y轴线ctx.moveTo(padding + 0.5, height - padding + 0.5);ctx.lineTo(padding + 0.5, padding + 0.5);ctx.stroke();// x轴线ctx.moveTo(padding + 0.5, height - padding + 0.5);ctx.lineTo(width - padding + 0.5, height - padding + 0.5);ctx.stroke();

座標点を描画します

y軸上の座標点をいくつ自分で定義するか y軸上の座標値を計算するには、データの最大値を取得する必要があります。軸。 x 軸の点は受信データの長さによって決まり、座標値は受信データの xAxis

属性

によって決まります。

座標値はテキストであり、ctx.fillText(value, x, y)によってテキストで埋められます。valueはテキスト値、x yは値の座標です

• ctx.textAlign='center'テキストの中央揃えを設定します

• ctx.fillStyle='#000000' テキストの塗りつぶしの色を設定します

var yNumber = 5;                                                // y轴的段数var yLength = Math.floor((height - padding * 2) / yNumber);     // y轴每段的真实长度var xLength = Math.floor((width - padding * 2) / data.length);  // x轴每段的真实长度ctx.beginPath();ctx.textAlign = &#39;center&#39;;ctx.fillStyle = &#39;#000000&#39;;ctx.strokeStyle = &#39;#000000&#39;;// x轴刻度和值for (var i = 0; i < data.length; i++) {
    var xAxis = data[i].xAxis;
    var xlen = xLength * (i + 1);
    ctx.moveTo(padding + xlen, height - padding);
    ctx.lineTo(padding + xlen, height - padding + 5);
    ctx.stroke();                                       // 画轴线上的刻度
    ctx.fillText(xAxis, padding + xlen - xLength / 2, height - padding + 15);   // 填充文字}// y轴刻度和值for (var i = 0; i < yNumber; i++) {
    var y = yFictitious * (i + 1);
    var ylen = yLength * (i + 1);
    ctx.moveTo(padding, height - padding - ylen);
    ctx.lineTo(padding - 5, height - padding - ylen);
    ctx.stroke();
    ctx.fillText(y, padding - 10, height - padding - ylen + 5);}

列アニメーション

次に、データを高さ方向に表示する必要があります。ここにはアニメーション効果があり、列は 0 から対応する値に変化します。キャンバスにアニメーションを実装するには、

set

Interval、set

Time

out、requestAnimationFrameを使用できます。 requestAnimationFrameはタイミング時間を自分で設定する必要はなく、ブラウザの描画に従います。こうすることでコマ落ちがなく、自然に滑らかになります。 requestAnimationFrameは当初IE10以降のみをサポートしていましたが、互換性のある記述方法によりIE6にも対応できます。

function looping() {
    looped = requestAnimationFrame(looping);
    if(current < 100){      
    // current 用来计算当前柱状的高度占最终高度的百分之几，通过不断循环实现柱状上升的动画
        current = (current + 3) > 100 ? 100 : (current + 3);
        drawAnimation();
    }else{
        window.cancelAnimationFrame(looped);
        looped = null;
    }}function drawAnimation() {
    for(var i = 0; i < data.length; i++) {
        var x = Math.ceil(data[i].value * current / 100 * yRatio);
        var y = height - padding - x;
        ctx.fillRect(padding + xLength * (i + 0.25), y, xLength/2, x);
        // 保存每个柱状的信息
        data[i].left = padding + xLength / 4 + xLength * i;
        data[i].top = y;
        data[i].right = padding + 3 * xLength / 4 + xLength * i;
        data[i].bottom = height - padding;
    }}looping();

Cylinder は、ctx.fillRect(x, y, width, height) によって実装される長方形を描画します。x y は長方形の左上隅の座標、幅高さです。は長方形の幅と高さ、単位はピクセルです

• ctx.fillStyle='#1E9FFF' 塗りつぶしの色を設定します

• この時点で、基本的なヒストグラムが完成します。次に、タイトルを追加します。

タイトル

タイトルを配置するには、早朝に定義したパディング

内側マージン

が非常に便利であることがわかります。ヒストグラム上でタイトルを覆うことはできません。ただし、一部のタイトルは上部にあり、一部は下部にあるため、書ききれない場合があります。

変数

positionを設定して位置を決定し、描画します。これはシンプルです。

// 标题if(title){                      // 也不一定有标题
    ctx.textAlign = 'center';
    ctx.fillStyle = '#000000';  // 颜色，也可以不用写死，个性化嘛
    ctx.font = '16px Microsoft YaHei'
    if(titlePosition === 'bottom' && padding >= 40){
        ctx.fillText(title,width/2,height-5)    }else{
        ctx.fillText(title,width/2,padding/2)    }}

マウスの動きを聞く

イベント

一部のグラフでは、マウスを上に動かすと現在の列の色が変わり、マウスを動かすと元の色に戻ります。 。ここでは、マウスの位置が円柱状の領域内にあるときにイベントがトリガーされるように、mouseover イベントをリッスンする必要があります。

那我怎么知道在柱状里啊，发现在 drawAnimation() 里会有每个柱状的坐标，那我干脆把坐标给保存到 data 里。那么鼠标在柱状里的条件应该是：

• ev.offsetX > data[i].left

• ev.offsetX

• ev.offsetY > data[i].top

• ev.offsetY

canvas.addEventListener('mousemove',function(ev){
    var ev = ev||window.event;
    for (var i=0;i<data.length;i++){
    for (var i=0;i<data.length;i++){
        if(ev.offsetX > data[i].left &&
        ev.offsetX < data[i].right &&
        ev.offsetY > data[i].top &&
        ev.offsetY < data[i].bottom){
            console.log(&#39;我在第&#39;+i+&#39;个柱状里。&#39;);
        }
    }})

总结

为了更方便的使用，封装成构造函数。通过

var chart = new sBarChart('canvas',data,{
    title: 'xxx公司年度盈利',   // 标题
    titleColor: '#000000',      // 标题颜色
    titlePosition: 'top',       // 标题位置
    bgColor: '#ffffff',         // 背景色
    fillColor: '#1E9FFF',       // 柱状填充色
    axisColor: '#666666',       // 坐标轴颜色
    contentColor: '#a5f0f6'     // 内容横线颜色
});

参数可配置，很简单就生成一个个性化的柱状图。代码地址：canvas-demo

最后加上折线图、饼图、环形图，完整封装成sChart.js插件，插件地址：sChart.js

以上がキャンバスダイナミックチャートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。