- ベストアンサー
chart.js4.2でカラー設定をする方法
- chart.js4.2でのカラー設定について質問があります。
- 現在、chart.js4.2を使用して複数のグラフを表示する方法を学んでいます。
- しかし、プラグインのカラー設定に困っています。どのようにカラー設定をするのか、教えていただけますか？
- turu575
- お礼率80% (91/113)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
プラグイン（他力本願）は、無くても良いでしょう。 下記のコード・サンプルをお試しください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>chart.js multiグラフ サンプル</title> <style> .container { position: relative; } .container .chart1 { margin-bottom: 0; width: 400px; height: 350px; } .container .lateral { position: absolute; top: 260px; width: 100%; height: 300px; display: flex; } .container .lateral div { margin: 0 1em 0 0; width: 300px; height: 250px; } .container div > canvas { padding: 1em; border: solid 1px violet; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js"></script> </head> <body> <h1>chart.js multiグラフ サンプル</h1> <h2>chart.js4.2でカラー設定をする方法</h2> <div class="container"> <div class="chart1">■Bar chart 1 <canvas id="myChart1"></canvas></div> <div class="lateral"> <div>■Pie chart 1 <canvas id="myChart2"></canvas></div> <div>■Pie chart 2 <canvas id="myChart3"></canvas></div> <div>■Pie chart 3 <canvas id="myChart4"></canvas></div> </div> </div> <script> (function() { // 色の設定 (original) const color1 = ['red','green','skyblue']; const mycolor = ['rgb(221,160,221)','rgb(228,0,127)','rgb(160,216,239)','rgb(146,7,131)','rgb(0,153,68)','rgb(255, 215, 0)','rgb(0,158,150)']; //グラフの描画関数 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: { //responsive: false, title: { display: options.title.length > 0, // タイトルがあれば表示 text: options.title }, legend: { // 凡例 //onClick: function () { return false }, //凡例クリック時、何も返さないコード display: true, // 表示の有無 position: options.legendPosition, // 表示位置 labels: { usePointStyle: options.usePointStyle // 円の凡例スタイルを使うか } } } } }); return myPieChart; } const label1 = [ {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]} ]; const datasets = [ {label: label1[0].label,data: label1[0].data}, {label: label1[1].label,data: label1[1].data}, {label: label1[2].label,data: label1[2].data} ]; //------------------------------------------------------------- //Bar chart const barChart = displayChart('myChart1', 'bar', datasets,{ title: '', usePointStyle: false, legendPosition: 'top' }); for (let i=0; i<datasets.length; i++){ datasets[i]["backgroundColor"] = color1[i]; //カラー設定 } barChart.update(); //更新 //------------------------------------------------------------- //Pie chart for (var i = 0; i < 3; i++) { PieChart = displayChart(`${'myChart'+(i + 2)}`, 'pie', [label1[i]], { title: label1[i].label, usePointStyle: true, legendPosition: 'left' }); label1[i]["backgroundColor"] = mycolor; //カラー設定 PieChart.update(); //更新 } })(); </script> </body> </html>
その他の回答 (1)
- retorofan
- ベストアンサー率34% (435/1276)
今回のテーマ（ご質問）は、 『chart.js4.2でカラー設定をする方法』 ですので、本件に派生した問題が出ましたら、 別の質問として上げて頂くと有難いです。 恐縮ではございますが、よろしくお願いいたします。 （コーディング環境が無い出先に居ます）
お礼
別途質問をいたします。
お礼
retorofan 様ありがとうございます。 サンプルコードをコピペして試したところ非常に各グラフがボックスに収まり見やすく描画されました。ありがとうございました。 なお、const label1をdatasetsだけにし const 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]} ]; {label: label1[0]・・部分は削除しました。 余分な質問ですが 当初のコードで描画すると棒グラフが半分くらいに圧縮されたようにしか描画されなかったのでそれを直すために datasets: datasets }, options: { maintainAspectRatio: false, plugins: { としていましたが、これを教えてもらったコードに加えると棒グラフの縦幅が大きくなりすぎ下のグラフと重なるような状態となりました。これって必要なものですか