chart.jsを用いて、混合グラフを作成したいのですが、
画像赤文字の部分に単位を表示したいのですが、うまくいきません。
CSSで無理やり重ねれば近い事はできるのですが、
流用したいのでJavaScriptで指定したいです。
色々調べたのですが、画像のような表示にしかできない状況です。
お手数ですが、対処方法をご教示願いたいです。
数値、変数名等は適当なので気にしないでください。
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> #chart-container { height: 500px; width: 750px; } </style> </head> <body> <div id="chart-container"> <canvas id="my_chart"></canvas> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> <script> (function () { "use strict"; var type = "bar"; // 棒グラフ var data = { labels: [2010, 2011, 2012, 2013], datasets: [ // 棒グラフ1 { label: "Sales", data: [100, 200, 221, 350], backgroundColor: "green", //棒の色 yAxisID: "sales-axes", }, // 棒グラフ2 { label: "Sales", data: [100, 200, 221, 350], // 実際のデータ backgroundColor: "skyblue", //棒の色 yAxisID: "sales-axes", }, // 棒グラフ3 { label: "Sales", data: [100, 200, 221, 350], // 実際のデータ backgroundColor: "red", //棒の色 borderWidth: 0, // 枠線を消す yAxisID: "sales-axes", }, // 折れ線グラフ1 { label: "Subscribers", data: [800, 1230, 241, 1790], type: "line", fill: false, yAxisID: "subscribers-axes", borderColor: "pink", }, // 折れ線グラフ { label: "Subscribers", data: [80, 1350, 1241, 790], type: "line", fill: false, yAxisID: "subscribers-axes", borderColor: "skyblue", }, ], }; var options = { scales: { // X軸の設定 xAxes: [ { stacked: true, //積み上げグラフの設定 ※必須 scaleLabel: { display: true, labelString: "(年)", }, }, ], // Y軸の設定 yAxes: [ { stacked: true, // 積み上げグラフの設定 ※必須 scaleLabel: { display: true, labelString: "(人)", }, ticks: { // 最小値、最大値のベース値を固定。超過した場合、値が変動する suggestedMin: 0, suggestedMax: 400, }, id: "sales-axes", type: "linear", position: "left", }, { ticks: { // 最小値、最大値のベース値を固定。超過した場合、値が変動する suggestedMin: 0, suggestedMax: 2000, stepSize: 500, // 1目盛りのサイズ }, id: "subscribers-axes", type: "linear", position: "right", gridLines: { display: false, // グリッド線を消す }, }, ], }, }; // 多分二次元という意味の2d var ctx = document.getElementById("my_chart").getContext("2d"); var myChart = new Chart(ctx, { type: type, data: data, options: options, }); })(); </script> </body> </html>
まだ回答がついていません
会員登録して回答してみよう