chart.jsのグラフを複数個表示する方法
今回は、chart.jsのグラフを複数表示する方法についてお尋ねします。一応下記のコードで棒グラフ×1、円グラフ×3を上下2個ずつ配置出来るようにまではなったのですが、ただ単に1個のグラフのコードを4回繰り返したようなものですので無駄が多く冗長なコードになっています。これをもっとコンパクトなものに出来ないかと思い投稿した次第です。html,css,javascriptに関しては専門家でないのでつまみ食い程度の知識で間に合わせたお粗末なコードですが、宜しくご教授願います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>multiグラフ</title>
</head>
<body>
<div class="row" style="width: 70%;" >
<div class="chart1" style="float: left;" >
<canvas id="myChart1" width="550" height="450"></canvas></div>
<div class="chart2" style="float: right;">
<canvas id="myChart2" width="550" height="450"></canvas></div>
<div class="chart3" style="bottom: 0;float: left;">
<canvas id="myChart3" width="550" height="450"></canvas></div>
<div class="chart4" style="bottom: 0;float: right;">
<canvas id="myChart4" width="550" height="450"></canvas></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://unpkg.com/chartjs-plugin-colorschemes"></script>
<script>
Chart.defaults.global.legend.labels.usePointStyle = false; //以降の凡例スタイルを矩形のまま
var ctx = document.getElementById("myChart1");
var myPieChart = new Chart(ctx, {
type: 'bar',
data: {labels: ['1月','2月','3月','4月','5月','6月','7月'], // Ｘ軸のラベル
datasets: [
{label: '仙台',data: [320000, 590000, 400000, 420000, 380000, 250000, 420000]},
{label: '札幌',data: [520000, 450000, 380000, 280000, 590000, 400000, 530000]},
{label: '渋谷',data: [650000, 230000, 480000, 600000, 620000, 700000, 760000]}]},
options: {
plugins: {
colorschemes: {scheme: 'office.Slice6'}},
responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定
title: {
display: false,
text:''},
legend: { // 凡例
display: true, // 表示の有無
position: 'top' } // 表示位置
}});
Chart.defaults.global.legend.labels.usePointStyle = true; //以降の凡例スタイルを矩形を円に変える
var ctx = document.getElementById("myChart2");
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {labels: ['1月','2月','3月','4月','5月','6月','7月'], // Ｘ軸のラベル
datasets: [{label:'仙台' ,data: [320000, 590000, 400000, 420000, 380000, 250000, 420000]}]},
options: {
plugins: {
colorschemes: {scheme: 'brewer.DarkTwo7'}},
responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定
title: {
display: true,
text:'仙台'},
legend: { // 凡例
display: true, // 表示の有無
position: 'left',} // 表示位置
}});
var ctx = document.getElementById("myChart3");
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['1月','2月','3月','4月','5月','6月','7月'], // Ｘ軸のラベル
datasets: [{label:'札幌' ,data: [520000, 450000, 380000, 280000, 590000, 400000, 530000]}]},
options: {
plugins: {
colorschemes: {scheme: 'brewer.DarkTwo7'}},
responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定
title: {
display: true,
text:'札幌'},
legend: { // 凡例
display: true, // 表示の有無
position: 'left'} // 表示位置
}});
</script>
</body>
</html>
文字数の関係で渋谷のグラフ（myChart4）の部分はカットしました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
fujillinさん ご回答ありがとうございました！ Documentationを見ながらやっていたのですが、英語が不出来なもので、当たりを付けてやってみていたのですが、全然見当違いの所をいじっていたみたいです。。。 おかげさまで、何とかうまくいきそうです！！ 本当にありがとうございました！ また何かありましたらぜひよろしくお願い致します。 ありがとうございました！