chart.jsを1ページ内に複数設置する方法
- 評価
- クリップ 0
- VIEW 2,652
前提・実現したいこと
chart.jsについてです。
chart.jsを使用してレーダーチャートを作り、運営中のWordPressサイトで公開したいのですが、複数のレーダーチャートを作ったところ2つ目が表示されません。
ショートタグを使用して実装する方法です。
コードはネットの記事を参考にしました。
function.php内
function canvas_tag($atts){
extract(shortcode_atts(array(
'id' => null
),$atts));
$html = <<<eof
<canvas id="{$id}"></canvas>
eof
;
return $html;
}
add_shortcode('canvas','canvas_tag');header.php内
<body <?php body_class(); ?> onload="displayPieChart();">投稿ページのheader内
<script language = "JavaScript" >
function displayPieChart() {
var data = {
labels: ["ああ", "いい", "うう", "ええ", "おお"],
datasets: [{
label: "商品名02",
fillColor: "rgba(200,0,0,0.2)",
strokeColor: "red",
pointColor: "red",
pointStrokeColor: "red",
pointHighlightFill: "red",
pointHighlightStroke: "red",
data: [5, 5, 5, 5, 5]
}]
};
var ctx = document.getElementById("radarChart").getContext("2d");
var options = {
legendTemplate: "<% for (var i=0; i<datasets.length; i++){%><span style=\"background-color:<%=datasets[i].strokeColorif(datasets[i].label){%><%=datasets[i].label%><%}%><br><%}%>",
responsive: true,
};
var radarChart = new Chart(ctx).Radar(data, options);
document.getElementById("info").innerHTML = radarChart.generateLegend();
}
</script>
<script language = "JavaScript" >
function displayPieChart() {
var data2 = {
labels: ["かか", "きき", "くく", "けけ", "ここ"],
datasets: [{
label: "商品名02",
fillColor: "rgba(200,0,0,0.2)",
strokeColor: "red",
pointColor: "red",
pointStrokeColor: "red",
pointHighlightFill: "red",
pointHighlightStroke: "red",
data: [5, 5, 5, 5, 5]
}]
};
var ctx2 = document.getElementById("radarChart2").getContext("2d");
var options2 = {
legendTemplate: "<% for (var i=0; i<datasets.length; i++){%><span style=\"background-color:<%=datasets[i].strokeColorif(datasets[i].label){%><%=datasets[i].label%><%}%><br><%}%>",
responsive: true,
};
var radarChart2 = new Chart(ctx2).Radar(data2, options2);
document.getElementById("info").innerHTML = radarChart2.generateLegend();
} </script>投稿ページのheader内
[canvas id="radarChart"]
[canvas id="radarChart2"]
上記のようにしたのですが2個目のチャートのみが表示されています。
理由がわからないので教えていただきたいです。
コードはネットの記事を参考にしました。
https://www.m-design.site/blog/wordpress/wordpress%E3%81%A7chart-js%E3%82%92%E3%81%A4%E3%81%8B%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B/
まだjavaScript勉強し始めたばかりなので、単純なことかもしれませんがご回答頂けると嬉しいです。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
まだ回答がついていません
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.20%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正の依頼
m.ts10806
2018/05/15 11:39
IDは合ってるんですよね？radarChart,radarChart2 念のため参考にした記事のURLを質問本文に追記してください。また、コードは適切にインデントをつけてください。コードブロックの冒頭 ``` の直後に ```php ```js などと入れると言語にあわせて適切にハイライトされるのでご活用ください。
k1oi23s0hi
2018/05/15 11:54
初めての投稿でしたので手際が悪く申し訳ありません…。IDは合ってます。上記直しましたのでご確認頂けると嬉しいです。
asahina1979
2018/05/15 12:27
関数 displayPieChart が二つありますがこれもタイポ？
k1oi23s0hi
2018/05/15 12:35
先程そのミスに気づき違う関数を追記しましたが次は1個目だけが動きましたね…。onload近辺がおかしい気がしてきました。
m.ts10806
2018/05/15 13:00 編集
ブラウザで表示して「ソースを表示」で確認したときに想定通りになっているか確認する必要がありそうです。ひとまずいきなりWordPress上で入れるのではなく複数チャート表示をローカルの静的HTMLで試してみて、うまくいってから違いを見比べてみては？
k1oi23s0hi
2018/05/15 13:38
なるほど、、やってみます！