ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML5 Canvas チャート アプリケーション Chart.js カスタム プロンプト折れ線グラフ

HTML5 Canvas チャート アプリケーション Chart.js カスタム プロンプト折れ線グラフ

高洛峰
リリース: 2016-11-04 16:36:50
オリジナル
1852 人が閲覧しました

超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

实现图http://www.shouce.ren/example/try?pc=/api/jq/Chart/index.html

实例代码

<div class="htmleaf-container">
            <div class="htmleaf-content">
                <div style="width:30%;margin:0 auto;">
                    <div>
                        <canvas id="canvas" height="450" width="600"></canvas>
                    </div>
                </div>
            </div>
        </div>
 
        <script src="/api/jq/Chart/js/Chart.js"></script>
        <script>
            var randomScalingFactor = function() {
                return Math.round(Math.random() * 100)
            };
            var lineChartData = {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [
                    {
                        label: "My First dataset",
                        fillColor: "rgba(220,220,220,0.2)",
                        strokeColor: "rgba(220,220,220,1)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
                    },
                    {
                        label: "My Second dataset",
                        fillColor: "rgba(151,187,205,0.2)",
                        strokeColor: "rgba(151,187,205,1)",
                        pointColor: "rgba(151,187,205,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(151,187,205,1)",
                        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
                    }
                ]
 
            }
 
            window.onload = function() {
                var ctx = document.getElementById("canvas").getContext("2d");
                window.myLine = new Chart(ctx).Line(lineChartData, {
                    responsive: true
                });
            }
 
 
        </script>
ログイン後にコピー


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート