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

 

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

 

参考

 

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

 

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

 

カテゴリー　エントリーページでは各ページに個別のｉｎｄｅｘ　ｈｔｍｌが無い...
との事情でしょうか？
と。ご理解ください

 

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

 

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

 

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

 

 

---

 

ここでおひとつ提案

 

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

 

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

 

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

 

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

---

 

 

では、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.ｊｓグラフチャート表示例とカスタマイズ

 

 

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列目に　ＩＤ　canvasが置かれていますが
document.getElementById("canvas")

 

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

 

 

 

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

 

以下記述を好みの位置に配置して下さい
<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.ｊｓグラフチャート表示例とカスタマイズでご確認ください

 

 

 

スポンサーリンク

 

 

---

 

 

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