2軸で棒グラフと折れ線グラフを表示するサンプルソースに、
軸ラベルを表示するように追加しましたが、軸ラベルが表示されません。
(追加部分は下記ソースのコメントの //追加部分 だけです)
グラフは問題なく表示されます。
どうすればラベルが表示されるようになりますか。
よろしくお願いします。
【Javascript】 window.onload = function() { var complexChartOption = { responsive: true, scales: { yAxes: [{ id: "y-axis-1", type: "linear", position: "left", scalelabel: { //追加部分 display: true, //追加部分 labelString: '縦軸ラベル1', //追加部分 }, //追加部分 ticks: { max: 100, min: 0, stepSize: 10 }, }, { id: "y-axis-2", type: "linear", position: "right", scalelabel: { //追加部分 display: true, //追加部分 labelString: '縦軸ラベル2', //追加部分 }, //追加部分 ticks: { max: 100, min: 0, stepSize: 10 }, } ], } }; var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], datasets: [ { type: 'bar', label: 'apples', data: [12, 19, 3, 17, 6, 3, 7], backgroundColor: "rgba(153,255,51,0.4)", yAxisID: "y-axis-1", }, { type:'line', label: 'oranges', data: [2, 29, 5, 5, 2, 3, 10], backgroundColor: "rgba(255,153,0,0.4)", yAxisID: "y-axis-2", } ] }, options: complexChartOption }); };
【HTML】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> <script src="test4.js" type="text/javascript"></script> </head> <body> <div> <canvas id="myChart"></canvas> </div> </body> </html>
回答1件
あなたの回答
tips
プレビュー