サイトマップ
シリウス外サイトをサーバーに組み込む
シリウスでは カテゴリー エントリーページでは スタイルや動きに
定評のある chart.ｊs scriptが読み込まれず 解説サイトなどを
作成する際の障害となっている状況です
トップページにいきなりグラフチャート置いて見てもいまいちですね
やはり 下層のカテゴリー エントリーページに配置が良いと思われます
では 提案します
シリウスサイトを置く 同サーバーに独自にグラフチャートページを
置いてみれば如何でしょう
chart.ｊsファイルには sampleファイルが用意されいますが
ある程度のコンテンツを加えて サーバーにアップロード
ファイルをシリウスリンクで呼び出せばよいだけです
頭のリンクURLは シリウスサイトと同じになりますので 読者が他サイトへ
飛ばされたとの不快感は感じられないかと
レイアウトは異なるものの 構成次第では何とか良いスタイルに
なるかも...です
では 進めますね
PC内に置く原本
sampleファイルは 編集する際マウス操作の開くではデモ画面に
なってしまいますので エディタで開いて編集とします
エディタがなければ マイクロソフトの無償版は使えますよ
visualstudiocode
https://www.visualstudio.com/ja-jp/products/code-vs.aspx
編集が完了しましたら シリウスサイトを置く階層にアップロードします
アップロードファイルは sampleファイル以外 梱包されているもの
反映に必要なものすべてです
不足していると動きません
で...シリウスサイトのどこかにリンクを置けば クリックでサーバー内ファイルが
表示されます
リンク記載 当サイトＵＲＬ使用の場合
<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.ｊｓのグラフチャートはデフォルトでも複数用意されています</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、シリウスサイトにＨＴＭＬ記述で横長表示の棒グラフで範囲を指定するコードのご案内です
- Google Chart ＡＰ1利用のグラフ表示
- SIRIUS シリウスサイトにGoogle Chart AP1で発行されるグラフチャートスクリプトコードを張り付ければ 各種のコンテンツに適合する比較グラフの表示が可能です
- chart.ｊｓでグラフチャートを表示する
- SIRIUS シリウスサイトに評価の高いchart.ｊｓでグラフチャートを表示する手順をご案内します
- chart.ｊｓグラフチャート表示例とカスタマイズ
- シリウスで配置するchart.ｊｓのグラフチャート複数表示例とコンテンツに含めるための 範囲や比較などに仕様するカスタマイズ手順をご案内
- グラフのデモページへの作り方 スクリプト全般に応用可能
- シリウスサイトでグラフを使用してウェブ解説などする際はデモページへ参照としてリンク誘導しては如何でしょう？ 今回はスクリプト全般に応用可能なご案内で進めています
