• MENU●●●●
  • chart.jsグラフチャート表示例とカスタマイズ


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    chart.jsグラフチャート表示例および比較範囲の編集方法

    chart.jsのグラフチャートはデフォルトでも複数用意されています

     

    用意されているファイルより記述を確認し編集することで コンテンツに
    合わせた比較 範囲の表示指定をします

     

    用意されているファイルはどこにあるかですが

     

    ダウンロードファイルchart.js masterに梱包されている

     

    samplesファイルを開いてフォルダーをマウス操作で開きますと

     

    scriptの動きが確認できソースを表示すれば記述詳細が理解できます

     


     

    ソース表示でファイルを確認してみましょう

     

    以下記載.barhtml例

     

     

    <!doctype html>
    <html>
    <head>
    <title>Bar Chart</title>
    <script src="../Chart.js"></script>
    </head>

     

    <body>

     

            ページに記載する項目
    <div style="width: 50%"> 
    <canvas id="canvas" height="450" width="600"></canvas>
    </div>

     

     

    ここから下の記載は シリウスに配置する場合head内となり
    コピーして貼り付け後 詳細をカスタマイズします

     

     

    <script>
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

     

    var barChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
    {
    fillColor : "rgba(220,220,220,0.5)",
    strokeColor : "rgba(220,220,220,0.8)",
    highlightFill: "rgba(220,220,220,0.75)",
    highlightStroke: "rgba(220,220,220,1)",
    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
    },
    {
    fillColor : "rgba(151,187,205,0.5)",
    strokeColor : "rgba(151,187,205,0.8)",
    highlightFill : "rgba(151,187,205,0.75)",
    highlightStroke : "rgba(151,187,205,1)",
    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
    }
    ]

     

    }
    window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
    responsive : true
    });
    }

     

    </script>
    </body>
    </html>

     

    ここまで

     


     

    表示に使用されるカラーコードは rgbaです
    rgba(220,220,220,0.5)

     

     

    はて、ここでお気が付きでしょうがグラフとしては表示される構造の記述は
    確認できた

     

    しかし、はて、範囲を指定するカスタマイズはいずこで?

     

    sampleファイルの画面デモ表示ではマウス操作で範囲指定の
    比較数値が表示されるのですが

     

    何処で指定して表しているのか?

     

    ですね

     

    指定を出来なければグラフの意味がないですもんね

     

     

    sampleファイルでは、docsファイルから指示を読み込んでいるので
    ソースでは指定を確認できませんが

     

    シリウスに導入した場合は HTML head内に置くscript記載を編集します

     


     

    比較範囲の割合の変化指定と表される数値

     

    上記に置くsampleページでグラフにマウスを当てると%を示す数値が 
    二つ比較できるよう表示されますことをご確認ください

     

     

    sampleはデフォルトで指定が表示されますがグラフのラインは、数値を
    改行指定するに従い変化します

     

    本家解説サイト参照 
    http://www.chartjs.org/docs/

     

     

    原本記載より、数値を変更する上下二つのメモリ

     

    グラフにより、上メモリは一番左 下メモリは 上メモリと比較されるメモリと
    解釈してください

     

     

    <script>
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

     

    var barChartData = {
    labels : ["January","February","March","April","May","June","July"],
    ここは上メモリ
              datasets : [
    {
    fillColor : "rgba(220,220,220,0.5)",
    strokeColor : "rgba(220,220,220,0.8)",
    highlightFill: "rgba(220,220,220,0.75)",
    highlightStroke: "rgba(220,220,220,1)",

     

    以下の赤行を改行します

    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]

    },

     

     

     

    {
    下メモリ
    fillColor : "rgba(151,187,205,0.5)",
    strokeColor : "rgba(151,187,205,0.8)",
    highlightFill : "rgba(151,187,205,0.75)",
    highlightStroke : "rgba(151,187,205,1)",

     

    以下の赤行を改行します
    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
    }
    ]

     

    }

     

     

    上の改行欄を削除して以下記述に書き換えます
    上記改行箇所はデフォルトで梱包内の別スクリプトを読み込む記載ですので
    削除して数値を加えれば 改行後の数値とグラフ割合に変化します

     

    グラフは2つの比較となるのですが 上下の記述の区別はありません
    行が極端に少なくなりますが 全然問題ありません

     

    数値は 左から グラフも左からに表されます

     


    data: [65, 59, 80, 81, 56, 55, 40]

     


    data: [28, 48, 40, 19, 86, 27, 90]

     

     

     

    改行例

     

    var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
    {
    label: "My First dataset",
    fillColor: "rgba(220,220,220,0.5)",
    strokeColor: "rgba(220,220,220,0.8)",
    highlightFill: "rgba(220,220,220,0.75)",
    highlightStroke: "rgba(220,220,220,1)",
    data: [65, 59, 80, 81, 56, 55, 40] // 比較指定数値
    },
    {
    label: "My Second dataset",
    fillColor: "rgba(151,187,205,0.5)",
    strokeColor: "rgba(151,187,205,0.8)",
    highlightFill: "rgba(151,187,205,0.75)",
    highlightStroke: "rgba(151,187,205,1)",
    data: [28, 48, 40, 19, 86, 27, 90]//比較指定数値
    }
    ]
    };

     


     

    ここまでの手順を踏めばグラフをコンテンツに合わせて表示は出来るかと?
    理解しますが、オプションを組み入れて変化させたい場合は
    docsfファイルを参照ください

     

    または本家サイトで....

     

     

    オプションを参照

     

    var option = {
    //Boolean - 縦軸のライン位置の上書きの許可
    scaleOverride : true,
    //** ↑がtrueの場合 *
    //Number - ライン位置の間隔
    scaleSteps : 6,
    //Number - ライン位置区切りの間隔
    scaleStepWidth : 10,
    //Number - ライン位置の最小値
    scaleStartValue : 100,
    //String - ライン位置の線の色
    scaleLineColor : "rgba(0,0,0,.1)",
    //Number - ライン位置の幅
    scaleLineWidth : 10,
    //Boolean - メモリを表示するかどうか
    scaleShowLabels : true,
    //String - メモリのフォント
    scaleFontFamily : "'Arial'",
    //Number - メモリのフォントサイズ
    scaleFontSize : 10,
    //String - メモリのフォントスタイル bold→太字
    scaleFontStyle : "normal",
    //String - メモリのフォント
    scaleFontColor : "#333",
    ///Boolean - チャートの背景にグリッドを描画するか
    scaleShowGridLines : true,
    //String - チャート背景のグリッド色
    scaleGridLineColor : "rgba(0,0,0,.05)",
    //Number - チャート背景のグリッドの太さ
    scaleGridLineWidth : 1,
    //Boolean - ラインを曲線にするかどうか。falseで折れ線表示にする
    bezierCurve : true,
    //Boolean - 点を描画するか
    pointDot : true,
    //Number - 点の大きさ
    pointDotRadius : 3,
    //Number - 点の周りの大きさ
    pointDotStrokeWidth : 1,
    //Number - ラインの太さ
    datasetStrokeWidth : 2,
    //Boolean - アニメーションの有無
    animation : true,
    //Number - アニメーションの早さ(大きいほど遅い)
    animationSteps : 60,
    //Function - アニメーション終了時の処理
    onAnimationComplete : null
    }
    //グラフを描画する
    var myNewChart = new Chart(ctx).Line(data,option);
    //optionを指定せずとも描画可能
    //var myNewChart = new Chart(ctx).Line(data);

     


     

    オプションを参照とは、怠けているのではありませんが
    chart.jsの導入に疲れ果てまして 頭が動いてくれません
    このページのコンテンツは時間を置いてから再度進めたいと想います

     

    急ぐ方は 、本家サイトおよび他サイトを参考にしてください

     

    アイ?...すみません

     

    スポンサーリンク

     

     


     

     

    chart.jsグラフチャート表示例とカスタマイズ
    シリウスサイトにグラフチャートを表示させよう
    シリウスカスタマイズ

    chart.jsグラフチャート表示例とカスタマイズ関連解説
    シリウスに超簡単円グラフを導入
    SIRIUS シリウスサイトに超簡単に導入できる円グラフのご案内です ややのカスタマイズで速攻掲載可能 可愛いと評判のオールマイティ円グラフ
    横範囲指定 棒グラフ
    SIRIUS、シリウスサイトにHTML記述で横長表示の棒グラフで範囲を指定するコードのご案内です
    Google Chart AP1利用のグラフ表示
    SIRIUS シリウスサイトにGoogle Chart AP1で発行されるグラフチャートスクリプトコードを張り付ければ 各種のコンテンツに適合する比較グラフの表示が可能です
    chart.jsでグラフチャートを表示する
    SIRIUS シリウスサイトに評価の高いchart.jsでグラフチャートを表示する手順をご案内します
    シリウスに単独でチャートコンテンツページを組み込む
    シリウスでは構造上 トップページ以外ではチャートscriptが表示されない場合もあります そんな場合は 独自にhtmlサイトをサーバーに置いて読み込みます
    グラフのデモページへの作り方 スクリプト全般に応用可能
    シリウスサイトでグラフを使用してウェブ解説などする際はデモページへ参照としてリンク誘導しては如何でしょう? 今回はスクリプト全般に応用可能なご案内で進めています

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト