ご質問　お問い合わせ
シュガー様より

 

管理人様

 

夜分に突然のメール失礼します

 

シリウスを少しでもカスタマイズしたいと思い　
いろいろなサイトめぐりをしていましたところ　貴サイトを拝見させて
いただくこととなりました

 

シリウスのカスタマイズを対象とした類似サイトと比べましても
情報量が圧倒的に多く　サイドバーの追尾や　アコーディオンメニューなど
痒いところに手の届く内容に感心しております

 

そこでひとつ質問させて下さい
現在　シリウスのサイト上にて「chart.js」を用いたグラフ等を表示させたいと
考えているのですが　まったくうまく行きません

 

参考にしたサイト
：http://programmerbox.com/2013-05-24_chart.js_tutorial/

 

手順としましては、データをダウンロード⇒「Chart.js」というファイルを
アップロード
⇒<script src="アップロードした階層のディレクトリ名/Chart.js"></script>を
シリウスのhtmlテンプレート編集に記述しました

 

わたしは独自ドメインを取り　サブディレクトリ展開をしているので
前述のアップロードした階層のディレクトリ名は　
「サブディレクトリ名/Chart.js」にしました
(http://〜からも試しましたけど、結果はダメでした)

 

次に
<canvas id="line" height="450" width="600"></canvas>を
記事本文に記述
プレビューでは恐らくグラフが表示されるであろう部分が空白で
ある程度のスペースを確保していました

 

最後に以下のコードを同じく　htmlテンプレート編集に記述しました
書き込む場所が悪いのかと思い　ヘッダー部分であったり
いろいろな箇所に書き換えてはみましたが　
プレビューでは　サイト上部にコードが表示されたりと　
思うようにはいきません

 

一体どこが悪いのでしょうか？

 

もしよろしければお手すきの時にでも　お返事頂けますと幸いです

 

それでは用件ばかりで恐縮ですが失礼します
※利用しているサーバーは、ロリポップやミニバードになります

 

var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
var myLine = new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);

 

---

 

2015　0906

 

お便り頂いてからのご返事が遅くなり大変申し訳ありません

 

 

私事で申し訳ないのですが　無視していたのではなくご返事できる
状況ではなかったのです

 

 

Chart.jsをシリウス内に導入してみたのですが
質問同様に表示されませんで　

 

いろいろ試してはの繰り返しで時間ばかりが経過してしまいました

 

 

今日　やっと表示される手順が検証できましたのでお知らせします

 

デモ

 

しかし　現在の状況は　シリウスページ全てに反映されるに
至っておりません

 

プレビューで確認すれば　トップ　カテゴリー　エントリーページ
全てで反映は確認されます

 

アップロード以降は　トップページのみでは表示されるのですが
カテゴリー　エントリーページでは　指定する枠のスペースは空いているものの
読み込みされないのか？
表示されません

 

この　読み込みが反映されない事情は今後対処するよう努めます

 

 

 

では　質問に対するご返事としては不足ですが　トップページのみで
反映される手順をご案内します

 

 

まず
(http://〜からも試しましたけど、結果はダメでした)
は　改行せずでよいです

 

次に　ヘッダー内に　Chart.jsをHTMLで読み込むscriptの配置

 

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

 

ですが　何かしらの環境によりjqueryを同配置しないと
読み込まれない場合もあります

 

 

その際はhead内にjqueryを追加する必要があります
jqueryも以下を二つダウンロードしてアップしてください

 

どちらかひとつで良いのですが　後々考えて二つでもＯＫ
jquery-2.1.1.js
jquery-2.1.1.min.js

 

head内
<script src="jquery-2.1.1.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<script src="Chart.js"></script>

 

 

Chart..ここ間違えたかも？
サーバーにアップするファイルは
解凍したファイルの中のファイル一覧よりChar.jsのみをばらして単体で
アップします

 

他ファイルも単体でアップ

 

 

以下は　記事内ですが250にすると表示されません
<canvas id="line" width="300px" height="300px"></canvas>

 

 

シリウスのプレビューで確認する場合は　シリウスデータにもファイルをアップ

 

しかし　それだけではアップロードしても公開サイトでは反映されないので
サーバーへも　ファイルをアップします

 

逆に言いますと　サーバーだけにファイルをアップしても　プレビューでは非表示となります

 

scrip指定は　head内　上記　<script src="Chart.js"></script>のすぐ下に配置します

 

 

 

 

<script>で　上下を囲んでください

 

 

<script>

 

var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
var myLine = new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);

 

 

</script>

 

 

ここまでで　表示されました

 

 

詳細ページを追記しております
chart.ｊｓでグラフチャートを表示する

 

不明な箇所がございましたら　再度ご質問ください

 

 

 

スポンサーリンク

 

 

 

 

Chart.jsが読み込まれない
シリウスカスタマイズサポートフォーラム一覧
シリウスカスタマイズサポートフォーラム
シリウスカスタマイズ