chart.js4.2でカラー設定をする方法
- chart.js4.2でのカラー設定について質問があります。
- 現在、chart.js4.2を使用して複数のグラフを表示する方法を学んでいます。
- しかし、プラグインのカラー設定に困っています。どのようにカラー設定をするのか、教えていただけますか？
- ベストアンサー
chart.js4.2でカラー設定をする方法
過去にこのサイトでchart.js2.9を使い複数グラフを表示する方法(https://okwave.jp/qa/q9834370.html)を教えてもらいましが、今回v.4.2にそれを適用するにあたりプラグインのカラー設定に代わる方法がないかと試行を繰り返し、素人のため無理筋の方法ですが下記のコードまで至りました。そこで、このお粗末なコードを適切なものに手直ししていただきたくお願い申し上げます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>multiグラフ</title> </head> <body> <div class="row" style="width: 100%;" > <div class="chart1" style="float: left;width:300px; height:250px" > <canvas id="myChart1"></canvas></div> <div class="chart2" style="float: right;width:300px; height:250px"> <canvas id="myChart2"></canvas></div> <div class="chart3" style="bottom: 0;float: left;width:300px; height:250px"> <canvas id="myChart3"></canvas></div> <div class="chart4" style="bottom: 0;float: right;width:300px; height:250px"> <canvas id="myChart4"></canvas></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js"></script> <script> 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: { // 凡例 display: true, // 表示の有無 position: options.legendPosition, // 表示位置 labels: { usePointStyle: options.usePointStyle // 円の凡例スタイルを使うか } } } } }); } 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)']; const label1 = [ {label: '仙台',data: [320000, 590000, 400000, 420000, 380000, 250000, 420000],backgroundColor:mycolor}, {label: '札幌',data: [520000, 450000, 380000, 280000, 590000, 400000, 530000],backgroundColor:mycolor}, {label: '渋谷',data: [650000, 230000, 480000, 600000, 620000, 700000, 760000],backgroundColor:mycolor} ]; const datasets = [ {label: label1[0].label,data: label1[0].data,backgroundColor:color1[0]}, {label: label1[1].label,data: label1[1].data,backgroundColor:color1[1]}, {label: label1[2].label,data: label1[2].data,backgroundColor:color1[2]} ]; displayChart('myChart1', 'bar', datasets,{ title: '', usePointStyle: false, legendPosition: 'top', }); for (var i = 0; i < 3; i++) { displayChart("myChart".concat(i + 2), 'pie', [label1[i]], { title: label1[i].label, backgroundColor:mycolor, usePointStyle: true, legendPosition: 'left' }); } </script> </body> </html> 特にbackgroundColorの設定をoptionで設定出来ないかと思いましたが方法が分かりませんでしたのでこのようなコードをに成り果てました。 また、カラースキーム組み合わせは別の手段を使って作りコピペしているのですがこれも貧弱なものですので、使えるプラグインがあればご教授お願いいたします。
- turu575
- お礼率75% (66/88)
- 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
- ベストアンサー率33% (328/975)
今回のテーマ（ご質問）は、 『chart.js4.2でカラー設定をする方法』 ですので、本件に派生した問題が出ましたら、 別の質問として上げて頂くと有難いです。 恐縮ではございますが、よろしくお願いいたします。 （コーディング環境が無い出先に居ます）
お礼
別途質問をいたします。
関連するQ&A
- chart.jsのコードを2.9から4.2に変換
以前使っていたchart.jsのバージョン2.9系から最新の4.2系に変えたいと思い試行しています。基本的なサンプルはなんとかなるのですが、3系統に変わってから大きく変化した部分が全く理解しないまま2系統を使い続けて来たのが現況です。今回、4系統に挑戦するにあたり下記の2系統で人口ピラミッドのためのコードの書き換え方をお教えください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>multiグラフ</title> </head> <body> <div class="row" style="width: 100%;" > <div class="chart1" style="float: left;" > <canvas id="myChart1" width="300" height="450"></canvas></div> <div class="chart2" style="left: 300px"> <canvas id="myChart2" width="350" height="450"></canvas></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <script> Chart.defaults.global.defaultFontColor = 'black'; var ctx = document.getElementById("myChart1").getContext('2d'); var myChart = new Chart(ctx, { type: "horizontalBar", // 水平棒グラフ data: { labels: ['90歳以上','85～89歳','80～84歳','75～79歳','70～74歳','65～69歳','60～64歳','55～59歳','50～54歳','45～49歳','40～44歳','35～39歳','30～34歳','25～29歳','20～24歳','15～19歳','10～14歳','5～9歳','0～4歳'], datasets: [ { label:'男',data: [-3790,-8605,-14805,-16655,-19641,-29027,-26151,-22360,-19752,-19288,-22510,-20397,-17238,-14645,-12763,-16385,-15610,-14625,-13880,], backgroundColor: "red" } ] }, options: { responsive: false, title: { display: true, text: 'Pyramide des ages' }, scales: { xAxes: [{ stacked: true, ticks: { callback: function (v){ return Math.abs(v) } } }], yAxes: [{stacked: true, ticks: { display: false } }] } } }); var ctx = document.getElementById("myChart2").getContext('2d'); var myChart = new Chart(ctx, { type: "horizontalBar", // 水平棒グラフ data: { labels: ['90歳以上','85～89歳','80～84歳','75～79歳','70～74歳','65～69歳','60～64歳','55～59歳','50～54歳','45～49歳','40～44歳','35～39歳','30～34歳','25～29歳','20～24歳','15～19歳','10～14歳','5～9歳','0～4歳'], datasets: [ { label:'女',data: [13400,18358,23241,22544,23231,29351,25690,22067,20064,19011,21714,19305,16677,14028,12091,14741,14919,13973,13049], backgroundColor: "green" } ] }, options: { responsive: false, title: { display: true, text: '' }, scales: { xAxes: [{ stacked: true, }], yAxes: [{stacked: true }] }, } }); </script> </body> </html> これは、Y軸のラベル表示を真ん中に置きたいがため2個のcanvasを強引に並べています。 ちなみに、canvas分けないで一つだけにしてY軸を左端にした場合で試したところ。 "horizontalBar"の部分を type: "bar", options: { indexAxis: "y", }, に代えても 肝心の「xAxes」の部分をどう変えていいか分からないためそままにしておいたら、当然のごとく Invalid scale configuration for scale: xAxes Invalid scale configuration for scale: yAxes のエラーメッセージが出てグラフも左右でなく上下の状態となります。 コピペだけで既存のコードを利用している者として不勉強で申し訳ありませんがご教授お願いいたします。
- 締切済み
- JavaScript
- 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）の部分はカットしました。
- ベストアンサー
- JavaScript
- chart.js4系で凡例をカスタマイズする方法
今回、chart.jsの2系から4系に変更するにあたり下記の多重円のサンプルで以前から気になっていた系列を利用した凡例の■（以前は濃いグレー）を黒からそれぞれ任意の色に出来ないかと思い悩んでいましたが、米国のあるQ&Aサイトに載っていた方法（前に投稿しましたが削除済み）等試しましたがそこまでしなくても単にfontColorをreturn内で指定するだけで出来ました（下記コード）。 しかしこの方法でもボックス部分とテキストを含めた凡例全体の色が変わりました。今回はpinkで指定したところ、テキストの色がpinkでは見た目が鮮明とはいえません。やはり、テキストとボックス部分で別の色の出来ないかと思いまして、何か解決方法があればお教えください。 <script> const CHART_COLORS = {'赤': 'rgb(230,0,18)','プラム': 'rgb(221,160,221)','マゼンタ': 'rgb(228,0,127)','スカイブルー': 'rgb(160,216,239)','紫': 'rgb(146,7,131)','緑': 'rgb(0,153,68)','ゴールド': 'rgb(255, 215, 0)' }; const ctx = document.getElementById("myPieChart"); const myPieChart = new Chart(ctx, { type: 'pie', data: { labels: ['Jan','Feb','Mar','Apr','May','June'], // Ｘ軸のラベル datasets: [ { label: 'NY', data: [32, 59, 40, 42, 38, 25],backgroundColor: Object.values(CHART_COLORS), tension: 2,fill: false}, { label: 'LA', data: [52, 45, 38, 28, 59, 40],backgroundColor: Object.values(CHART_COLORS), tension: 2,fill: false}, { label: 'CHI', data: [65, 23, 48, 60, 62, 70],backgroundColor: Object.values(CHART_COLORS), tension: 2,fill: false} ] }, options: { responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定 plugins: { legend: { // 凡例 display: true, // 表示の有無 position: 'bottom', // 表示位置 labels: { generateLabels: function(chart) { return chart.data.datasets.map(function(datasets, i) { return { fontColor: 'pink', //凡例の色を指定 datasetIndex: i, text: datasets.label, fillStyle: datasets.backgroundColor, strokeStyle: datasets.borderColor, // 表示状態に連動して取り消し線表示 hidden: !chart.isDatasetVisible(i), }; }); } }, onClick: function(e, legendItem){ const index = legendItem.datasetIndex; const ci = this.chart; const meta = ci.getDatasetMeta(index); meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null; ci.update(); } } } } }); </script> さらに欲を言えば「labels: ['Jan','Feb', 」等を使ったデフォルトの凡例も別位置に配置出来ないかと考えています。なお、デフォルト凡例と <button・・でで作った凡例の両方操作できる方法は、このサイトで以前(https://okwave.jp/qa/q9820330.html)教えてもらっています。 どうかよろしくお願いいたします。 また、同じような内容で投稿、削除を繰り返し行っていることお許しください。
- 締切済み
- JavaScript
- chart.jsでx軸の表示値をカスタマズする方法
いつもお世話になっております。今回、chart.jsで水平横棒グラフ使ったピラミッドチャートのx軸の片方の系列の値をカスタマイズする方法につて伺います。下記のコードの方法では左側の男の方の値が－表示になってしまいます。これを＋表示に変更する方法についての相談です。目盛表示のカスタマイズには、ticks の callback にコールバックを定義すれば可能だと思いますが、左右違う系列の場合どうすればいいのか分かりません。もし可能ならばその方法をご教授願います。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>棒グラフ</title> </head> <body> <canvas id="myBarChart" width="550" height="480"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script> <script> var ctx = document.getElementById("myBarChart").getContext('2d'); var myChart = new Chart(ctx, { type: "horizontalBar", // 水平棒グラフ data: { labels: ['90歳以上','85～89歳','80～84歳','75～79歳','70～74歳','65～69歳','60～64歳','55～59歳','50～54歳','45～49歳','40～44歳','35～39歳','30～34歳','25～29歳','20～24歳','15～19歳','10～14歳','5～9歳','0～4歳'], datasets: [ { label:'男',data: [-3790,-8605,-14805,-16655,-19641,-29027,-26151,-22360,-19752,-19288,-22510,-20397,-17238,-14645,-12763,-16385,-15610,-14625,-13880,], backgroundColor: "red" }, { label:'女',data: [13400,18358,23241,22544,23231,29351,25690,22067,20064,19011,21714,19305,16677,14028,12091,14741,14919,13973,13049], backgroundColor: "green" } ] }, options: { responsive: false, title: { display: true, text: 'Pyramide des ages' }, scales: { xAxes: [{stacked: true,}], yAxes: [{stacked: true }] }, } }); </script> </body> </html>
- ベストアンサー
- JavaScript
- 複数canvasを表示状態のまま一つの画像に
先だってchart.js4.2でカラー設定をする方法(https://okwave.jp/qa/q10117946.html)で複数グラフを上1、下3できれいに配置する方法を教えてもらいました。そのコードに今まで2.9系で上下2個づつの配置表示したものを一つの画像にする下記のコードを加え試しましたが使えませんでした。 function imageDownload() { var chartWidth = 350; var chartHeight = 242; var imageType = "image/png" var imageFileName = "chart.png"; var bufferCanvas = document.createElement("canvas") bufferCanvas.width = chartWidth * 1.82; bufferCanvas.height = chartHeight * 2.2; bufferCanvas.style.display = "none"; document.body.appendChild(bufferCanvas); var ctx = bufferCanvas.getContext("2d"); // 背景色を設定（しない場合は透過） ctx.fillStyle = "rgb(255, 255, 255)"; ctx.fillRect(0, 0, bufferCanvas.width, bufferCanvas.height); // グラフを貼り付け for (i = 1; i <= 4; i++) { ctx.drawImage( document.getElementById("myChart" + i), i % 2 == 1 ? 0 : chartWidth, i <= 2 ? 0 : chartHeight ); } var imageURL = bufferCanvas.toDataURL(imageType); そこで、スタイル設定のボックスを無くし下記のように配置するようにしました。 <div class="row" style="width:100%;" > <div class="chart1" style="position: relative; top: 0; right: 0; left: 0; margin:0;" >c <canvas id="myChart1" width="400px" height="230px"></canvas></div> <div class="chart2" style="position: absolute; top: 300px; right: 0; left: 0; margin:0;" > <canvas id="myChart2" width="210px" height="210px"></canvas></div> <div class="chart3" style="position: absolute; top: 300px; right: 0; left:215px; margin:0;"> <canvas id="myChart3" width="210px" height="210px"></canvas></div> <div class="chart4" style="position: absolute; top: 300px; right: 0; left:430px; margin:0;"> <canvas id="myChart4" width="210px" height="210px"></canvas></div> </div> しかしながらこの画像化コードでは上下に2個配置するようになっているため大きさの違う上のグラフと下の最初のグラフが左右に一部重なって描画される結果となりました。 そこで、任意の配置状態を保ったまま一つの画像とする方法をお教えください。
- 締切済み
- JavaScript
- chart.js4.2でマウスオーバー情報の変更
char.js4.2.1で下記のコードを使い人口ピラミッドを作ることは出来たのですがマウスオーバー時に 80～84歳 ■男: -14,805 の形で表示されますがこの数値を絶対値で処理する方法をお教えください。 <script> var ctx = document.getElementById("myBarChart").getContext('2d'); var data = { labels: ['90歳以上','85～89歳','80～84歳','75～79歳','70～74歳','65～69歳','60～64歳','55～59歳','50～54歳','45～49歳','40～44歳','35～39歳','30～34歳','25～29歳','20～24歳','15～19歳','10～14歳','5～9歳','0～4歳'], datasets: [{ label: '男', data: [-3790,-8605,-14805,-16655,-19641,-29027,-26151,-22360,-19752,-19288,-22510,-20397,-17238,-14645,-12763,-16385,-15610,-14625,-13880], backgroundColor: 'red' }, { label: '女', data: [13400,18358,23241,22544,23231,29351,25690,22067,20064,19011,21714,19305,16677,14028,12091,14741,14919,13973,13049], backgroundColor: 'green' }] }; var options = { indexAxis: 'y', scales: { y:{ beginAtZero: true, stacked: true, display: true, title:{ display: true, text: '年齢' } }, x:{ stacked: true, display: true, //min: 300, title:{ display: true, text: '人数' }, ticks: { callback: function (v) { return Math.abs(v) } } }, }, plugins: { title: { display: true, text: 'Pyramide des ages' } } }; var ex_chart = new Chart(ctx, { type: 'bar', data: data, options: options, }); </script>
- ベストアンサー
- JavaScript
- chart.js4系でグラフサイズ設定方法を詳しく
先の質問「chart.js4.2でカラー設定をする方法 ・・https://okwave.jp/qa/q10117946.html」のコードで描画すると棒グラフが上半分くらいに圧縮されたようにしか描画されなかったのでそれを直すために datasets: datasets }, options: { maintainAspectRatio: false, plugins: { としていましたが、これを回答してもらったコードに加えると棒グラフの縦幅が大きくなりすぎ下のグラフと重なるような状態となりました。 デフォルトでは、 「リサイズしても、元のキャンバスの縦横比（幅／高さ）は維持されます。」 とあります。さらに縦横比（幅／高さ）に関し 「aspectRatio number 1|2 キャンバスの縦横比（すなわち、幅 / 高さ、値 1 は正方形のキャンバスを表す）。なお、このオプションは、高さが属性として、またはスタイルによって明示的に定義されている場合は無視されます。放射状チャート（ドーナツ、パイ、polarArea、レーダー）のデフォルト値は1、その他のチャートのデフォルト値は2です。 」 それで最初の棒グラフでは縦横比が1/2になっているためとなんとなくこの動きは理解できましたが、しかし後の方でもcssのスタイル設定で明示的に .container .chart1 { margin-bottom: 0; width: 400px; height: 350px; } としているのに「スタイルによって明示的に定義されている場合は無視されます」ありますが1/2のままです。そこでmaintainAspectRatio: falseを加えて初めてスタイル設定が有効になります。 2系に比べ4系は本家のサイトによる情報が主ですし英語は翻訳サイトを使うしか能がないため理解できないことがすこぶる多いのが現状ですので、宜しければ、適正なサイズの設定方法に関する明快で詳しい情報のご教授お願いいたします。
- ベストアンサー
- JavaScript
- background-color ｃｓｓ
あるテーブルの<td>タグに2色のbackgroundcolorを指定し、Aの場合はA色のbackgroundcolorを指定し、Bの場合はA色の上にB色のbackgroundcolorを重ねたいですが、ソースは下記の要となっていますが、私にわかるのが<div>での指定しか分からなくて、それ以外の方法があれば教えていただきたいです。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-31j" /> <title>新規予約</title> </head> <body> <style> .test{ position:relative; width:100px; height:100px; z-index:2; background-color:rgb(255,0,255); } .test_2{ position:relative; top:-20px; width:50px; filter: alpha(opacity=50); opacity:0.5; } .test_3{ position:relative; color:rgb(255,255,255); height:100px; background-color:rgb(0,0,255); z-index:1; } .test_4{ position:relative; color:rgb(0,0,0); weight:100px; z-index:2; } </style> <div class="test"> <div class="test_4"> <a href="test">テスト</a> </div> <div class="test_2"> <div class="test_3"> </div> </div> </div> </body> </html>
- 締切済み
- HTML
- chart.js tooltipに表示要素を追加
chart.jsを使用して、添付の画像のような折れ線グラフを作成しています。 グラフにマウスを当てた際、ツールチップを使用して、X軸とY軸の値に設定した内容が表示されるようになりましたが、X軸、Y軸と関係のないちょっとしたコメントを載せたいと思っています。 以下、作成しているJSです。 --------------------- var comment = [ "コメント1", "コメント2", "コメント3", "コメント4", ]; var chart = new Chart(ctx, { type: 'line', data: { labels: [ ['1期','2018'], ['2期','2019'], ['3期','2020'], ['4期','2021'] ], datasets: [ { label: '青', borderColor: 'rgb(84, 142, 242)', fill: false, data: [3521, 5323, 8442, 2535], }, { label: 'オレンジ', borderColor: 'rgb(248, 120, 35)', fill: false, data: [1023, 1953, 1274, 1534] } ] }, options: { 以下省略 tooltips: { // キャンバス上のツールチップを無効にする enabled: false, custom: function(tooltipModel) { // ツールチップ要素 var tooltipEl = document.getElementById('chartjs-tooltip'); // 最初のレンダリング時に要素を作成する if (!tooltipEl) { tooltipEl = document.createElement('div'); tooltipEl.id = 'chartjs-tooltip'; tooltipEl.innerHTML = "<div class='myChart_contents'>"; document.body.appendChild(tooltipEl); } // ツールチップがない場合は非表示にします if (tooltipModel.opacity === 0) { tooltipEl.style.opacity = 0; return; } // キャレット(ツールチップが指し示すもの)の位置を設定する tooltipEl.classList.remove('above', 'below', 'no-transform'); if (tooltipModel.yAlign) { tooltipEl.classList.add(tooltipModel.yAlign); } else { tooltipEl.classList.add('no-transform'); } function getBody(bodyItem) { return bodyItem.lines; } // テキストを設定する if (tooltipModel.body) { var titleLines = tooltipModel.title || []; var bodyLines = tooltipModel.body.map(getBody); var innerHtml = ''; //タイトル titleLines.forEach(function(title) { innerHtml += '<p class="myChart_term">第' + title.replace(",", "（") + '年度）</p>'; }); //コメント bodyLines.forEach(function(body, i) { innerHtml += '<p class="myChart_comment">' + comment[i] + '</p>'; }); //Y軸 innerHtml += '<table class="myChart_value"><tbody>'; bodyLines.forEach(function(body, i) { innerHtml += '<tr><td>' + body[0].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '人</td></tr>'; //y軸 //innerHtml += '<tr><td>' + body + '人</td></tr>'; //y軸 }); innerHtml += '</tbody></table>'; var tableRoot = tooltipEl.querySelector('div'); tableRoot.innerHTML = innerHtml; } 以下省略 } } } }); --------------------- 現状、グラフにマウスを載せると以下のような表示がされ、 コメント部分はすべて「コメント1」と表示されます。 第1期（2018年度） コメント1 青:3521人 第2期（2019年度） コメント1 青:5323人 第2期の場合は「コメント2」、第3期の場合は「コメント3」と表示されるようにしたいのですが、 どのように作成したら良いか分からず、ご教示いただけると幸いです。
- ベストアンサー
- JavaScript
- 隙間があく理由
以下のHTMLを見ると隙間がキャンバスの下に開きます。 クロム IE ファイヤーフォックス似て確認。 なぜあくのかわかりません。教えてください。 ------------------------------------------ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>テスト</title> <style> <!-- *{ margin:0px; padding:0px; border:none; } canvas{ width:100px; height:50px; background-color:red; } div{ width:100px; height:50px; background-color:green; } --> </style> </head> <body> <canvas></canvas> <div> </div> </body> </html> --------------------------------------
- ベストアンサー
- CSS
お礼
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: { としていましたが、これを教えてもらったコードに加えると棒グラフの縦幅が大きくなりすぎ下のグラフと重なるような状態となりました。これって必要なものですか