• MENU●●●●
  • シリウスに単独でチャートコンテンツページを組み込む


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

    スポンサー広告

    関連記事


    シリウス外サイトをサーバーに組み込む

    シリウスでは カテゴリー エントリーページでは スタイルや動きに
    定評のある chart.js scriptが読み込まれず 解説サイトなどを
    作成する際の障害となっている状況です

     

    トップページにいきなりグラフチャート置いて見てもいまいちですね

     

    やはり 下層のカテゴリー エントリーページに配置が良いと思われます

     

     

    では 提案します

     

    シリウスサイトを置く 同サーバーに独自にグラフチャートページを
    置いてみれば如何でしょう

     

    chart.jsファイルには sampleファイルが用意されいますが 

     

    ある程度のコンテンツを加えて サーバーにアップロード

     

    ファイルをシリウスリンクで呼び出せばよいだけです

     

    頭のリンクURLは シリウスサイトと同じになりますので 読者が他サイトへ
    飛ばされたとの不快感は感じられないかと

     

     

    レイアウトは異なるものの 構成次第では何とか良いスタイルに
    なるかも...です

     

     

    では 進めますね

     

    PC内に置く原本 
    sampleファイルは 編集する際マウス操作の開くではデモ画面に
    なってしまいますので エディタで開いて編集とします

     

     

    エディタがなければ マイクロソフトの無償版は使えますよ
    visualstudiocode
    https://www.visualstudio.com/ja-jp/products/code-vs.aspx

     

     

    編集が完了しましたら シリウスサイトを置く階層にアップロードします

     

    アップロードファイルは sampleファイル以外 梱包されているもの
    反映に必要なものすべてです

     

    不足していると動きません

     

     

    で...シリウスサイトのどこかにリンクを置けば クリックでサーバー内ファイルが
    表示されます

     

     

    リンク記載 当サイトURL使用の場合
    <a href="http://affiliateno1.com/bar.html"><span style="color:#FF0A0A">どの~まる</span></a>

     

    affiliateno1.comは サイトURL

     

    bar.htmlは ファイルのお名前

     

    どの~まる..はコンテンツに合うタイトルテキスト

     

     

     

    チャートコンテンツが左よりですね

     

    ソース

     

    <!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>

     

     

    <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>

     

     


     

     

    centerを追加し中央寄りに指定してみました
    <center >~</center>

     


     

     

    ソース

     

    <!doctype html>
    <html>
    <head>
    <title>シリウスカスタムチャート</title>
    <script src="../Chart.js"></script>
    </head>
    <body>

     

     

    <p>chart.jsのグラフチャートはデフォルトでも複数用意されています</p>
        <p>サーバーファイルからフォルダーを表示させます</p>
    <center>
    <div style="width: 50%">
    <canvas id="canvas" height="450" width="600"></canvas>
    </div>
    </center>

     

     

     

    <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>

     

     

    カテゴリーページである程度のコンテンツを含め
    リンクでグラフページへ飛ばせば....なんとか

     

     

    html構造でのみ表示されていますのでレイアウトのカスタマイズは
    ちと面倒かもしれません

     

     

    解説は とりあえずここまで

     

    以降は自己努力でお進みください

     

     

    スポンサーリンク

     

     


     

     

     

    シリウスに単独でチャートコンテンツページを組み込む
    シリウスサイトにグラフチャートを表示させよう
    シリウスカスタマイズ

     

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

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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