• MENU●●●●
  • chart.jsでグラフチャートを表示する


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

    スポンサー広告

    関連記事


    chart.js導入手順

    グラフでチャートの表示スタイルは各種あるものの、単に固定されるだけで
    画像のような掲載モノではなく動きがある、それも滑らかに動くとなれば、
    script jqueryを利用すればシリウスでも配置は可能となります

     

    グラフチャートscript jqueryは、ややの種類が配布されておりますが
    ここでは動きや表示スタイルに高評価の chart.js scriptをシリウスに
    導入する手順でご案内します

     

    参考

     

    ただし、現在の作動検証結果、シリウス環境ではトップページでのみ
    反映され、カテゴリー エントリーページではスペースが空くだけでそのものが
    表示されない事情がございます

     

    ソフト機能に合わせたHTMLテンプレート、一つのスタイルシートで多くのページを
    指定する用構築されているが原因

     

    カテゴリー エントリーページでは各ページに個別のindex htmlが無い...
    との事情でしょうか?
    と。ご理解ください

     

    しかし シリウスのプレビュー機能で確認するとすべてのページで
    作動は確認できます....desu?

     

    アップロード画面ではトップページ以外全然表示されません..??

     

    シリウス ソフト機能を有しない以外のHTML構造のサイト構成ならば
    ページごとにファイルをつくるんで個別に表示が可能なんですが...

     

     


     

    ここでおひとつ提案

     

    ここでは説明手順としてトップページへのグラフチャート導入を説明しますが
    一般的なサイト構築の流れとして、トップはご案内コンテンツか、
    サイト全体の主張かと...限りませんが...

     

    グラフチャートを配置するページは カテゴリー エントリーページでも...と
    理解します

     

    トップ以下でグラフチャートページを表示する方法は、全然手順が
    異なりますがシリウス機能外ではでございます

     

    どんな方法かと思われるでしょうが、一度に説明できませんことで
    解説は、明日以降追記いたしますのでお待ちください 


     

     

    では、chart.jsファイルをダウンロードして導入へと進みます

     

    ファイルを配布している chart.jsのダウンロードご案内サイト
    http://www.chartjs.org/

     

     

    こちらは、直接ダウンロード出来る githubサイト
    https://github.com/nnnick/Chart.js

     

    右サイドに表示されている Download ZIP をダウンロードします

     

    次に解凍しますが、最初の解凍で表れる
    Chart.js masterのファイルでは 正常に読み込みが出来ません

     

    もう一度解凍して一覧ファイルをバラして、一つずつシリウス機能でサーバーへ
    アップロードします

     

    でも、サーバーにアップしてもプレビューでは表示確認ができません

     

    プレビューで確認をしたい場合はシリウスデータへもアップしてください

     

     

    html head内にscriptを配置

     

    以下のChart.jsファイル読み込み記述を追記します

     

    <script src="Chart.js"></script>

     

    次にダウンロードファイルからとりあえずlineファイルを開いて
    反映スタイルを指定するscript記載ををコピーして直下に配置します

     

    ファイルの確認、表示例はこちらでご確認ください
    chart.jsグラフチャート表示例とカスタマイズ

     

     

    line 記載例

     

    <script src="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>

     

     

     

    head内記載はここで終了

     

     

     

    Idの確認

     

    上記scriptでは 最終行3列目に ID canvasが置かれていますが
    document.getElementById("canvas")

     

    ページ内に置く描画コードIDも同じIDを指定しています

     

     

     

    記事内の掲載したい位置に描画の表示を指定します

     

    以下記述を好みの位置に配置して下さい
    <canvas id="canvas" width="400" height="400"></canvas>

     

    400 400で 表示されるサイズを指定していますが
    変更は可能です
    このままの記述コードで数値を縮小しすぎた場合は、表示されなくなる
    こともあります

     

    最初はデフォルトで表示確認、以降の調整にしてみましょう

     

     

    ここまでのコード配置で読み込まれますのでプレビュー確認してください

     

     


     

    レスポンシブ作動を加工する

     

    レスポンシブ作動を加える場合は、ページの描画指定コードを
    div要素で囲むこと

     

    更に%指定を付け加えます

     

     

    記載例

     

    <div style="width:70%">
    <canvas id="canvas" height="450" width="600"></canvas>
    </div>

     

     

    %の指定数値で表示枠が可変します
    色々数値替えして枠のサイズ調整をしてみましょう

     

     

    chart.jsの比較範囲おおよび数値指定のカスタマイズは 
    サイト以下に表示される関連ページメニュー

     

    chart.jsグラフチャート表示例とカスタマイズでご確認ください

     

     

     

    スポンサーリンク

     

     


     

     

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

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

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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