html5のキャンバスチャートにヒストグラムを実装する例-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

html5のキャンバスチャートにヒストグラムを実装する例

不言

Jun 05, 2018 pm 04:13 PM

この記事では、キャンバスチャートを使用して HTML5 でヒストグラムを実装する例を主に紹介します。編集者がそれを参考として共有します。

数日前にチャートライブラリを使用しましたが、デフォルトでキャンバスを使用するチャートライブラリは、ビッグデータの処理に優れています。次に、canvas を使用してグラフライブラリを実装します。最初は簡単な棒グラフを実装しましょう。

効果は次のとおりです:

主な機能ポイントは次のとおりです:

テキストの描画
XY軸の描画。
データグループの描画
アニメーションのデータ実装;
マウスイベントの処理。

まずは、EChartsの使い方をいくつか参考にしながら、まずhtmlタグを渡してチャートを表示し、次にinitを呼び出して渡します。初期化中のデータ。

var con=document.getElementById(&#39;container&#39;);
    var chart=new Bar(con);
    chart.init({
        title:&#39;全年降雨量柱状图&#39;,
        xAxis:{// x轴
            data:[&#39;1月&#39;,&#39;2月&#39;,&#39;3月&#39;,&#39;4月&#39;,&#39;5月&#39;,&#39;6月&#39;,&#39;7月&#39;,&#39;8月&#39;,&#39;9月&#39;,&#39;10月&#39;,&#39;11月&#39;,&#39;12月&#39;]
        },
        yAxis:{//y轴
            name:&#39;水量&#39;,
            formatter:&#39;{value} ml&#39;
        },
        series:[//分组数据
            {
                name:&#39;东部降水量&#39;,
                data:[62,20,17,45,100,56,19,38,50,120,56,130]
            },
            {
                name:&#39;西部降水量&#39;,
                data:[52,10,17,25,60,39,19,48,70,30,56,8]
            },
            {
                name:&#39;南部降水量&#39;,
                data:[12,10,17,25,27,39,50,38,100,30,56,90]
            },
            {
                color:&#39;hsla(270,80%,60%,1)&#39;,
                name:&#39;北部降水量&#39;,
                data:[12,30,17,25,7,39,49,38,60,30,56,10]
            }
        ]
    });

Chart基本クラス、後で円グラフや折れ線グラフも書くので共通部分を抽出します。 Canvas.style.width と Canvas.width は異なることに注意してください。前者はグラフィックを引き伸ばしますが、後者は通常使用するものであり、グラフィックは引き伸ばされません。ここで最初に拡大してから縮小を書くのは、キャンバス上に文字を描画するときにぼやけてしまう問題を解決するためです。

class Chart{
        constructor(container){
            this.container=container;
            this.canvas=document.createElement(&#39;canvas&#39;);
            this.ctx=this.canvas.getContext(&#39;2d&#39;);
            this.W=1000*2;
            this.H=600*2;
            this.padding=120;
            this.paddingTop=50;
            this.title=&#39;&#39;;
            this.legend=[];
            this.series=[];
            //通过缩小一倍，解决字体模糊问题
            this.canvas.width=this.W;
            this.canvas.height=this.H;
            this.canvas.style.width = this.W/2 + &#39;px&#39;;
            this.canvas.style.height = this.H/2 + &#39;px&#39;;
        }
    }

ヒストグラムを初期化するには、es6 の Object.assign(this,opt) を呼び出します。これは、プロパティを現在のインスタンスにコピーする JQ の extend メソッドに相当します。同時に、htmlタグであるtip属性も作成され、後でデータ情報を表示するために使用されます。次に、グラフィックを描画し、マウスイベントをバインドします。

class Bar extends Chart{
    constructor(container){
        super(container);
        this.xAxis={};
        this.yAxis=[];
        this.animateArr=[];
    }
    init(opt){
        Object.assign(this,opt);
        if(!this.container)return;
        this.container.style.position=&#39;relative&#39;;
        this.tip=document.createElement(&#39;p&#39;);
        this.tip.style.cssText=&#39;display: none; position: absolute; opacity: 0.5; background: #000; color: #fff; border-radius: 5px; padding: 5px; font-size: 8px; z-index: 99;&#39;;
        this.container.appendChild(this.canvas);
        this.container.appendChild(this.tip);
        this.draw();
        this.bindEvent();
    }
    draw(){//绘制

    }
    showInfo(){//显示信息

    }
    animate(){//执行动画

    }
    showData(){//显示数据

    }

XY 軸を描画します

最初にタイトルを描画し、次に XY 軸を描画し、次に複雑な計算を含むグループ化されたデータ系列を横断し、次に XY 軸のスケールを描画し、グループラベルを描画し、最後にデータを描画します。データ項目系列はグループ化されたデータであり、X軸のxAxis.dataと1対1に対応します。各項目にはカスタマイズされた名前と色を付けることができます。指定しない場合、名前は nunamed に与えられ、色は自動的に生成されます。凡例属性は、その後のマウスクリックでクリックが正しいかどうかを判断するのに役立つため、ここでもタグリスト情報を記録するために使用されます。

キャンバスの主な知識:

グループ化タグはarcToメソッドを使用しており、角丸効果を描画することができます。

measureText メソッドはテキストの描画に使用されます。テキストの幅を測定するために使用できるため、位置の競合を避けるために次の描画の位置を調整できます。
平行移動メソッドは描画コンテキスト (保存と復元の間) に配置でき、複雑な位置計算を回避できます。

draw(){
    var that=this,
        ctx=this.ctx,
        canvas=this.canvas,
        W=this.W,
        H=this.H,
        padding=this.padding,
        paddingTop=this.paddingTop,
        xl=0,xs=0,xdis=W-padding*2,//x轴单位数，每个单位长度，x轴总长度
        yl=0,ys=0,ydis=H-padding*2-paddingTop;//y轴单位数，每个单位长度，y轴总长度

    ctx.fillStyle=&#39;hsla(0,0%,20%,1)&#39;;
    ctx.strokeStyle=&#39;hsla(0,0%,10%,1)&#39;;
    ctx.lineWidth=1;
    ctx.textAlign=&#39;center&#39;;
    ctx.textBaseLine=&#39;middle&#39;;
    ctx.font=&#39;24px arial&#39;;

    ctx.clearRect(0,0,W,H);
    if(this.title){
        ctx.save();
        ctx.textAlign=&#39;left&#39;;
        ctx.font=&#39;bold 40px arial&#39;;
        ctx.fillText(this.title,padding-50,70);
        ctx.restore();
    }
    if(this.yAxis&&this.yAxis.name){
        ctx.fillText(this.yAxis.name,padding,padding+paddingTop-30);
    }

    // x轴
    ctx.save();
    ctx.beginPath();
    ctx.translate(padding,H-padding);
    ctx.moveTo(0,0);
    ctx.lineTo(W-2*padding,0);
    ctx.stroke();
    // x轴刻度
    if(this.xAxis&&(xl=this.xAxis.data.length)){
        xs=(W-2*padding)/xl;
        this.xAxis.data.forEach((obj,i)=>{
            var x=xs*(i+1);
            ctx.moveTo(x,0);
            ctx.lineTo(x,10);
            ctx.stroke();
            ctx.fillText(obj,x-xs/2,40);
        });
    }
    ctx.restore();

    // y轴
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle=&#39;hsl(220,100%,50%)&#39;;
    ctx.translate(padding,H-padding);
    ctx.moveTo(0,0);
    ctx.lineTo(0,2*padding+paddingTop-H);
    ctx.stroke();
    ctx.restore();

    if(this.series.length){         
        var curr,txt,dim,info,item,tw=0;
        for(var i=0;i<this.series.length;i++){
            item=this.series[i];
            if(!item.data||!item.data.length){
                this.series.splice(i--,1);continue;
            }
            // 赋予没有颜色的项
            if(!item.color){
                var hsl=i%2?180+20*i/2:20*(i-1);
                item.color=&#39;hsla(&#39;+hsl+&#39;,70%,60%,1)&#39;;
            }
            item.name=item.name||&#39;unnamed&#39;;

            // 画分组标签
            ctx.save();
            ctx.translate(padding+W/4,paddingTop+40);
            that.legend.push({
                hide:item.hide||false,
                name:item.name,
                color:item.color,
                x:padding+that.W/4+i*90+tw,
                y:paddingTop+40,
                w:60,
                h:30,
                r:5
            });
            ctx.textAlign=&#39;left&#39;;
            ctx.fillStyle=item.color;
            ctx.strokeStyle=item.color;
            roundRect(ctx,i*90+tw,0,60,30,5);
            ctx.globalAlpha=item.hide?0.3:1;
            ctx.fill();
            ctx.fillText(item.name,i*90+tw+70,26);
            tw+=ctx.measureText(item.name).width;//计算字符长度
            ctx.restore();

            if(item.hide)continue;
            //计算数据在Y轴刻度
            if(!info){
                info=calculateY(item.data.slice(0,xl));
            }
            curr=calculateY(item.data.slice(0,xl));
            if(curr.max>info.max){
                info=curr;
            }
        }

        if(!info) return;
        yl=info.num;
        ys=ydis/yl;

        //画Y轴刻度
        ctx.save();
        ctx.fillStyle=&#39;hsl(200,100%,60%)&#39;;
        ctx.translate(padding,H-padding);
        for(var i=0;i<=yl;i++){
            ctx.beginPath();
            ctx.strokeStyle=&#39;hsl(220,100%,50%)&#39;;
            ctx.moveTo(-10,-Math.floor(ys*i));
            ctx.lineTo(0,-Math.floor(ys*i));
            ctx.stroke();

            ctx.beginPath();
            ctx.strokeStyle=&#39;hsla(0,0%,80%,1)&#39;;
            ctx.moveTo(0,-Math.floor(ys*i));
            ctx.lineTo(xdis,-Math.floor(ys*i));
            ctx.stroke();

            ctx.textAlign=&#39;right&#39;;
            dim=Math.min(Math.floor(info.step*i),info.max);
            txt=this.yAxis.formatter?this.yAxis.formatter.replace(&#39;{value}&#39;,dim):dim;
            ctx.fillText(txt,-20,-ys*i+10);
        }
        ctx.restore();
        //画数据
        this.showData(xl,xs,info.max);
    }
}

データ項目はその後アニメーション化する必要があり、マウスがスライドしたときに内容が表示されるため、アニメーションキュー animateArr に入れられます。ここでは、グループ化されたデータを展開し、前の 2 つのネストされた配列を 1 つのレイヤーに変換し、名前、x 座標、y 座標、幅、速度、色などの各データ項目の属性を計算する必要があります。データが整理された後、アニメーションが実行されます。

showData(xl,xs,max){
    //画数据
    var that=this,
        ctx=this.ctx,
        ydis=this.H-this.padding*2-this.paddingTop,
        sl=this.series.filter(s=>!s.hide).length,
        sp=Math.max(Math.pow(10-sl,2)/3-4,5),
        w=(xs-sp*(sl+1))/sl,
        h,x,index=0;
    that.animateArr.length=0;
    // 展开数据项，填入动画队列
    for(var i=0,item,len=this.series.length;i<len;i++){
        item=this.series[i];
        if(item.hide)continue;
        item.data.slice(0,xl).forEach((d,j)=>{
            h=d/max*ydis;
            x=xs*j+w*index+sp*(index+1);
            that.animateArr.push({
                index:i,
                name:item.name,
                num:d,
                x:Math.round(x),
                y:1,
                w:Math.round(w),
                h:Math.floor(h+2),
                vy:Math.max(300,Math.floor(h*2))/100,
                color:item.color
            });
        });
        index++;
    }
    this.animate();
}

アニメーションの実行

アニメーションの実行については何も言うことはなく、自己実行のクロージャ関数です。アニメーションの原理は、速度値 vy を y 軸上に順次累積することです。ただし、キューがアニメーションの実行を終了したらキューを停止する必要があるため、キューの実行が終了するたびに判定される isStop フラグがあることに注意してください。

animate(){
    var that=this,
        ctx=this.ctx,
        isStop=true;
    (function run(){
        isStop=true;
        for(var i=0,item;i<that.animateArr.length;i++){
            item=that.animateArr[i];
            if(item.y-item.h>=0.1){
                item.y=item.h;
            } else {
                item.y+=item.vy;
            }
            if(item.y<item.h){
                ctx.save();
                // ctx.translate(that.padding+item.x,that.H-that.padding);
                ctx.fillStyle=item.color;
                ctx.fillRect(that.padding+item.x,that.H-that.padding-item.y,item.w,item.y);
                ctx.restore();
                isStop=false;
            }
        }
        if(isStop)return;
        requestAnimationFrame(run);
    }())
}

バインディングイベント

イベント 1: マウス移動時に、マウスの位置がグループラベルまたはデータ項目上にあるかどうかを確認し、true の場合は、パスを描画した後に isPointInPath(x,y) を呼び出します。 = 'ポインター'; データ項目の場合、列を再描画し、それを区別するために透明度を設定する必要があります。コンテンツも表示する必要があります。これは、親コンテナーに対して相対的に配置される p であり、初期化中にtip属性として設定されます。表示部分を showInfo メソッドにカプセル化します。

イベント 2: マウスダウンが発生すると、マウスがクリックしたグループラベルを決定し、対応するグループデータシリーズに非表示属性を設定します。これが true の場合、項目が表示されないことを意味し、 draw メソッドを使用し、レンダリングと描画をオーバーライドし、アニメーションを実行します。

bindEvent(){
        var that=this,
            canvas=this.canvas,
            ctx=this.ctx;
        this.canvas.addEventListener(&#39;mousemove&#39;,function(e){
            var isLegend=false;
                // pos=WindowToCanvas(canvas,e.clientX,e.clientY);
            var box=canvas.getBoundingClientRect();
            var pos = {
                x:e.clientX-box.left,
                y:e.clientY-box.top
            };
            // 分组标签
            for(var i=0,item,len=that.legend.length;i<len;i++){
                item=that.legend[i];
                ctx.save();
                roundRect(ctx,item.x,item.y,item.w,item.h,item.r);
                // 因为缩小了一倍，所以坐标要*2
                if(ctx.isPointInPath(pos.x*2,pos.y*2)){
                    canvas.style.cursor=&#39;pointer&#39;;
                    ctx.restore();
                    isLegend=true;
                    break;
                }
                canvas.style.cursor=&#39;default&#39;;
                ctx.restore();
            }

            if(isLegend) return;
            //选择数据项
            for(var i=0,item,len=that.animateArr.length;i<len;i++){
                item=that.animateArr[i];
                ctx.save();
                ctx.fillStyle=item.color;
                ctx.beginPath();
                ctx.rect(that.padding+item.x,that.H-that.padding-item.h,item.w,item.h);
                if(ctx.isPointInPath(pos.x*2,pos.y*2)){
                    //清空后再重新绘制透明度为0.5的图形
                    ctx.clearRect(that.padding+item.x,that.H-that.padding-item.h,item.w,item.h);
                    ctx.globalAlpha=0.5;
                    ctx.fill();
                    canvas.style.cursor=&#39;pointer&#39;;
                    that.showInfo(pos,item);
                    ctx.restore();
                    break;
                }
                canvas.style.cursor=&#39;default&#39;;
                that.tip.style.display=&#39;none&#39;;
                ctx.globalAlpha=1;
                ctx.fill();
                ctx.restore();
            }
            
        },false);

        this.canvas.addEventListener(&#39;mousedown&#39;,function(e){
            e.preventDefault();
            var box=canvas.getBoundingClientRect();
            var pos = {
                x:e.clientX-box.left,
                y:e.clientY-box.top
            };
            for(var i=0,item,len=that.legend.length;i<len;i++){
                item=that.legend[i];
                roundRect(ctx,item.x,item.y,item.w,item.h,item.r);
                // 因为缩小了一倍，所以坐标要*2
                if(ctx.isPointInPath(pos.x*2,pos.y*2)){
                    that.series[i].hide=!that.series[i].hide;
                    that.animateArr.length=0;
                    that.draw();
                    break;
                }
            }

        },false);
    }
    //显示数据
    showInfo(pos,obj){
        var txt=this.yAxis.formatter?this.yAxis.formatter.replace(&#39;{value}&#39;,obj.num):obj.num;
        var box=this.canvas.getBoundingClientRect();
        var con=this.container.getBoundingClientRect();
        this.tip.innerHTML = &#39;<p>&#39;+obj.name+&#39;:&#39;+txt+&#39;</p>&#39;;
        this.tip.style.left=(pos.x+(box.left-con.left)+10)+&#39;px&#39;;
        this.tip.style.top=(pos.y+(box.top-con.top)+10)+&#39;px&#39;;
        this.tip.style.display=&#39;block&#39;;
    }

概要

ここで行われているのは基本的な効果にすぎません。実際には、レスポンシブなサポート、モバイルのサポート、アニメーション効果、複数の Y 軸のサポートなど、さらに最適化する必要がある領域がまだ多くあります。、コンテンツ効果の表示、ポリライン機能などもサポートしています。

関連する推奨事項: カラーブロックを動的に表示するレポート効果を実現する

HTML (サンプルコード)

ヒストグラム (棒グラフ) 効果を生成する HTML5 サンプルコード

以上がhtml5のキャンバスチャートにヒストグラムを実装する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5コード：Web構造に関する初心者向けガイドMay 08, 2025 am 12:15 AM

HTML5にWebサイトを構築する方法には、次のものが含まれます。1。セマンティックタグを使用して、などのWebページ構造を定義します。 2。マルチメディアコンテンツ、使用、タグを埋め込みます。 3.フォーム検証やローカルストレージなどの高度な機能を適用します。これらの手順を通じて、明確な構造と豊富な機能を備えた最新のWebページを作成できます。

H5コード構造：読みやすさのためのコンテンツの整理May 07, 2025 am 12:06 AM

合理的なH5コード構造により、ページは多くのコンテンツの中で際立っています。 1）コンテンツなどのセマンティックラベルを使用して、構造を明確にするためにコンテンツを整理します。 2）FlexBoxやグリッドなどのCSSレイアウトを介して、さまざまなデバイスでのページのレンダリング効果を制御します。 3）レスポンシブデザインを実装して、ページがさまざまな画面サイズに適応するようにします。

H5対古いHTMLバージョン：比較May 06, 2025 am 12:09 AM

HTML5（H5）以降のバージョンのHTMLの主な違いには、次のものが含まれます。1）H5はセマンティックタグを導入し、2）マルチメディアコンテンツをサポートし、3）オフラインストレージ機能を提供します。 H5は、新しいタグやタグなどのAPIを介してWebページの機能と表現力を高め、ユーザーエクスペリエンスやSEO効果を改善しますが、互換性の問題に注意を払う必要があります。

H5対HTML5：用語と関係を明確にするMay 05, 2025 am 12:02 AM

H5とHTML5の違いは次のとおりです。1）HTML5は、構造とコンテンツを定義するWebページ標準です。 2）H5は、迅速な開発とマーケティングに適したHTML5に基づくモバイルWebアプリケーションです。

HTML5機能：H5のコアMay 04, 2025 am 12:05 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、フォームエンハンスメント、オフラインストレージ、ローカルストレージが含まれます。 1。コードの読みやすさやSEO効果を改善するなどのセマンティックタグ。 2.マルチメディアサポートは、メディアコンテンツを埋め込むプロセスとタグを簡素化します。 3.フォームエンハンスメント新しい入力タイプと検証プロパティを導入し、フォーム開発を簡素化します。 4.オフラインストレージとローカルストレージは、ApplicationCacheとLocalStorageを通じてWebページのパフォーマンスとユーザーエクスペリエンスを改善します。

H5：HTMLの最新バージョンの探索May 03, 2025 am 12:14 AM

html5isamajorrevision ofhtmlstandardthatedatedatizeizeswebdevelovement byintunwingnewsemanticelementsandcapabilities.1）itenhancesscodereadability and.2）html5EnableSricher、InteractiveEnceEnceEnceEncedienceEnceDirectembe、and.2）

基本を超えて：H5コードの高度な手法May 02, 2025 am 12:03 AM

H5の高度なヒントには以下が含まれます。1。複雑なグラフィックスを使用して描画します。2。ウェブワーカーを使用してパフォーマンスを向上させます。これらのヒントは、開発者がよりダイナミックでインタラクティブで効率的なWebアプリケーションを構築するのに役立ちます。

H5：Webコンテンツとデザインの未来May 01, 2025 am 12:12 AM

H5（HTML5）は、新しい要素とAPIを介してWebコンテンツと設計を改善します。 1）H5はセマンティックタグ付けとマルチメディアサポートを強化します。 2）キャンバスとSVGを導入し、Webデザインを濃縮します。 3）H5は、新しいタグとAPIを介してHTML機能を拡張することにより機能します。 4）基本的な使用には、それを使用したグラフィックの作成が含まれ、高度な使用法にはwebstorageapiが含まれます。 5）開発者は、ブラウザの互換性とパフォーマンスの最適化に注意を払う必要があります。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。