- ベストアンサー
chart.jsのグラフを複数個表示する方法
- chart.jsのグラフを複数個表示する方法についてお尋ねします。
- 棒グラフ×1、円グラフ×3を上下2個ずつ配置する方法を教えてください。
- html,css,javascriptに関して知識が浅いため、コンパクトなコードにできるか教えていただきたいです。
- turu575
- お礼率80% (91/113)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
それぞれのグラフの描画において、変化する部分は - 描画するcanvas要素 - グラフのタイプ - データセット - タイトル（あれば表示） - 色テーマ - 凡例のスタイルを円形にするか - 凡例の位置 の7つです。これらを引数として受け取る関数を定義すると冗長性を解消できます。 具体的には下記のコードのようになります。 function displayChart(canvasId, chartType, datasets, options) { var ctx = document.getElementById(canvasId); var myPieChart = new Chart(ctx, { type: chartType, data: { labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], // Ｘ軸のラベル datasets: datasets }, options: { plugins: { colorschemes: { scheme: options.colorscheme } }, responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定 title: { display: options.title.length > 0, // タイトルがあれば表示 text: options.title }, legend: { // 凡例 display: true, // 表示の有無 position: options.legendPosition, // 表示位置 labels: { usePointStyle: options.usePointStyle // 円の凡例スタイルを使うか } } } }); } var 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] }, ]; displayChart("myChart1", "bar", datasets, { title: "", colorscheme: "office.Slice6", usePointStyle: false, legendPosition: "top", }); for (var i = 0; i < 3; i++) { displayChart(`myChart${i + 2}`, "pie", [datasets[i]], { title: datasets[i].label, colorscheme: "brewer.DarkTwo7", usePointStyle: true, legendPosition: "left", }); } displayChartにそれぞれのグラフを描画する処理を記述しています。#myChart1以外のグラフは共通する引数が多いため、for文でdisplayChartを呼び出します。
お礼
いつも的確な回答有難う御座います。 なるほど、最初に変化する部分を引数として受け取る関数を定義してから描画処理の実行ですね。私のだらだらコードと比べれば全く違ったものですね！ 相変わらずfilemakerのお約束で、 displayChart(`myChart${i + 2}`, を displayChart('myChart'.concat(i + 2), に変更してfilemakerのwebビューア表示もOKでした。 専門家で無いことを言い訳にしての初歩的な質問を繰り返す事に対し丁寧な回答をお示しくださいましたことに、改めて感謝いたします。