TOP

シリウスにChart.jsは読み込まれない?

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

 

管理人様

 

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

 

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

 

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

 

そこでひとつ質問させて下さい
現在 シリウスのサイト上にて「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も以下を二つダウンロードしてアップしてください

 

どちらかひとつで良いのですが 後々考えて二つでもOK
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.jsでグラフチャートを表示する

 

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

 

 

 

スポンサーリンク

 

 

 

 

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

Chart.jsが読み込まれない関連解説
シリウスでブログみたいなカスタマイズが可能なテンプレートは?
シリウスで他サービスでみられるようなブログレイアウトを作れるのか?可能であればいずれのテンプレートが適しているのか?
サーバー内のサイトファイル削除
シリウスで作成したサイトが不要になった際、サイトを管理画面で削除したが ファイルがサーバーに残ったままだとネット上には浮遊し続けますね ここで問題 サイトファイルを管理画面で先に削除した場合
フェイスブックを二つ運営しているときの分離投稿?
フェイスブックを二つ運営しているが、シリウスに取り付けたボタンで投稿すると一つにだけしか反映されない...二つを分離、分けて投稿できないか? という質問です....
外部依頼のシリウスTPソースSEO最適化?まれにめぐり合う障害
シリウスを所持しないSEO業者へサイトのSEO最適化を依頼した場合の不具合?まれにめぐり合う事情..の方からお問合せございまして記事追加...
シリウスデータの記事ファイルを更新したら記事が消えた?
シリウスのデータファイルを開いて記事を更新したら、其の後生成からアップしてページ確認するとすべてが消えていた?..との障害発生...解決策はサポート記事を御覧ください。
WPみたいなメニュー表示とファイル構成についての質問
WPのアーカイブみたいな表示をシリウスに適用できるか?トップURLの次はファイル名で、カテゴリーフォルダ名は表さない.....難易な質問ですね?
複合レイアウト、メニュー背景を削除したい?
3カラム、2カラムの複合個別レイアウト表示設定にしたが、メニューのグレー背景が邪魔なので削除したい...という質問です
エントリーからカテゴリへ階層異動でいいね登録数は消える
シリウスのページ階層、エントリーにいいねボタンを 置いているが、カテゴリーに上げたい、しかしファイル名が変わるといいね..指示数がリセットされてしまう...対応策はないのか?...ご返事はサポートフォーラムで..
iPhone設定、スマホで指定したTPカラーが反映されない
シリウスビジネステンプレートでiPhone設定しているのですが、スマートフォン表示で指定したカラーが反映されない?....お答えはカスタマイズサポートで...
インタースティシャル広告の位置合わせができない
シリウスにインタースティシャル広告を取り付けたが、位置が合わずうまく表示されないという質問です
1カラムのサイト幅変更に伴う見出し幅の調整についての質問
シリウスデフォルト1カラムのサイト幅を縮小したのですが、h2、h3、h4の各見出しの幅はすべて異なっています。調整できるのでしょうか?という質問です ね。お答えはサポートフォーラムでご覧ください..
モバイルグーグル検索(AMP)の高速表示システムは導入できるか?
シリウスサイトをモバイルページ対応にする?グーグル検索で高速表示させる(AMP)は導入は可能ですか?...という質問です。ご返事はサポートフォーラムでご覧ください.......