TOP

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

シリウスでは カテゴリー エントリーページでは スタイルや動きに
定評のある 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のグラフチャート複数表示例とコンテンツに含めるための 範囲や比較などに仕様するカスタマイズ手順をご案内
グラフのデモページへの作り方 スクリプト全般に応用可能
シリウスサイトでグラフを使用してウェブ解説などする際はデモページへ参照としてリンク誘導しては如何でしょう? 今回はスクリプト全般に応用可能なご案内で進めています