前提・実現したいこと
現在Chart.jsを使用し、以下画像のような2種類のbar chartを実装しようとしています。それに伴い、いくつか解決方法がわからない箇所が出てきており、困っています。
グラフ1
グラフ2
不明点
主な不明点は以下です(そもそも実装可能かどうかも含めて)
Chart.jsに関わらず他に実現方法等ありましたら教えていただけますと幸いです。
- チャート内の右側barのみ間隔を広げて表示することは可能か(右側barを強調したいため)
無理ならば2つのチャートを並べて表現しようと考えています。
- チャート内の右側のbarのlabel、データ値等のみstyleを変えることは可能か(右側グラフのstyleのみ太字にしたいです)
-Chart.jsではaxiosなどでAPIからJSONで数値を取得し、chart.js内のdataに代入して、データを更新することは可能でしょうか(基礎的な質問ですみません)
- 棒グラフ上部のdataの合計値が表示されている上あたりに画像を表示できればと考えています。chart.js内でデータ量に応じた画像の表示、またはタグの埋め込みとうは可能でしょうか。
グラフ1に関する点
- 現在グラフ1のチャート上部の合計値は同一チャート内にlineチャートを作成し、線をtransparentにして表示しています。ただ、jsのplugins > datalabels内にalign: "center"を指定しているため、うまくチャート上部に表示されません。特定のdataに対して別にプロパティを指定することは可能なのでしょうか。同時に、合計値のみ単位を「合計:◯◯」のように単位を変更したいと考えています。「時間」に関してはplugins > formetter以下にcallbackで指定しているのですが、これに関しても特定のデータにだけ別の指定をすることは可能でしょうか。
- 引き続いて上の合計値の表示に関する不明点ですが、現在同一チャート内にline chartを作成し、stackedしたチャートを合計した値をlineの配列にベタ打ちして表現しています。これらの合計値をjsで計算して代入したいのですが、方法がわからず困っています。良い方法がありましたらご教授いただけますでしょうか。
グラフ2に関する点
- 上記画像グラフ2の1月、2月の部分ですが、2つのdataを重ねて表現したいと思っています。現在xAxes以下の
barPercentage: 1.5にすることで重ねています。ただ、右側の棒が上に来るようにしたいのですが、良い方法はありますでしょうか?重ね方に関してもアドバイスいただけるとありがたいです。
- グラフ2の3月、平均の部分に関して、1月、2月の部分でdataを2つ使用しているため、単独のグラフの場合でも棒グラフがlabelから若干右によってしまっています。これを解消することは可能でしょうか(dataを2つ使用するか、1つのみ使用するかは月によって変更しようと考えています)
多くの質問、また初歩的な質問も多く大変申し訳ありませんが、
教えていただけますと大変助かります。どうぞよろしくお願いいたします。
グラフ1のソースコード
javascript
1const ctx = document.getElementById("myChart").getContext('2d'); 2ctx.canvas.height = 140; 3 4const myChart = new Chart(ctx, { 5 type: "bar", 6 plugins: [ChartDataLabels], 7 data: { 8 labels: ["1月", "2月", "3月", "平均"], 9 datasets: [ 10 { 11 data: [2, 5, 20, 9], 12 backgroundColor: [ 13 "rgba(54, 162, 235, 0.7)", 14 "rgba(54, 162, 235, 0.7)", 15 "rgba(54, 162, 235, 0.7)", 16 "rgba(54, 162, 235, 0.7)" 17 ], 18 }, 19 { 20 data: [10, 20, 10, 13], 21 backgroundColor: ["lightgreen", "lightgreen", "lightgreen", "lightgreen"] 22 }, 23 { //合計値表示のためのline chart 24 data: [12, 25, 30, 22], 25 type: "line", 26 lineTension: 0, 27 fill: false, 28 backgroundColor: "transparent", 29 borderColor: "transparent" 30 } 31 ] 32 }, 33 options: { 34 responsive: true, 35 hover: { 36 mode: null 37 }, 38 legend: { 39 display: false 40 }, 41 tooltips: { 42 enabled: false 43 }, 44 scales: { 45 yAxes: [ 46 { 47 stacked: true, 48 gridLines: { 49 display: false, 50 drawBorder: false 51 }, 52 ticks: { 53 beginAtZero: true, 54 max: 40, 55 stepSize: 10, 56 autoSkip: true, 57 display: false 58 }, 59 scaleLabel: { 60 display: false 61 } 62 } 63 ], 64 xAxes: [ 65 { 66 stacked: true, 67 categoryPercentage: 0.6, 68 barPercentage: 0.8, 69 gridLines: { 70 display: false, 71 lineWidth: 2 72 }, 73 ticks: { 74 autoSkip: false 75 } 76 } 77 ] 78 }, 79 plugins: { 80 datalabels: { 81 align: "center", 82 anchor: "center", 83 color: "black", 84 font: function(context) { 85 var w = context.chart.width; 86 return { 87 size: w < 512 ? 12 : 14 88 }; 89 }, 90 formatter: function(value) { 91 return value + "時間"; 92 } 93 } 94 } 95 } 96});
グラフ2のソースコード
javascript
1const ctx2 = document.getElementById("myChart2").getContext('2d'); 2ctx2.canvas.height = 140; 3 4const myChart2 = new Chart(ctx2, { 5 type: "bar", 6 plugins: [ChartDataLabels], 7 data: { 8 labels: ["1月", "2月", "3月", "平均"], 9 labelsData: ["270分", "180分", "160分", "280分"], 10 datasets: [ 11 { 12 data: [450, 100], 13 backgroundColor: ["lightblue", "lightblue", "lightblue", "lightblue"], 14 }, 15 { 16 data: [1270, 180, 160, 280], 17 backgroundColor: ["lightgreen","lightgreen","lightgreen","lightgreen"], 18 datalabels: { 19 display: true 20 }, 21 } 22 ] 23 }, 24 options: { 25 responsive: true, 26 hover: { 27 mode: null 28 }, 29 legend: { 30 display: false 31 }, 32 tooltips: { 33 enabled: false 34 }, 35 scales: { 36 yAxes: [ 37 { 38 gridLines: { 39 borderDash: [8, 4] 40 }, 41 ticks: { 42 beginAtZero: true, 43 autoSkip: true, 44 callback: function(value) { 45 return value + "分"; 46 }, 47 }, 48 scaleLabel: { 49 display: false 50 } 51 } 52 ], 53 xAxes: [ 54 { 55 categoryPercentage: 0.5, 56 barPercentage: 1.5, 57 gridLines: { 58 display: false, 59 lineWidth: 2 60 }, 61 ticks: { 62 autoSkip: false, 63 fontStyle: 'bold', 64 } 65 } 66 ] 67 }, 68 plugins: { 69 datalabels: { 70 display: false, 71 align: "end", 72 anchor: "end", 73 color: "black", 74 font: function(context) { 75 var w = context.chart.width; 76 return { 77 size: w < 512 ? 12 : 14 78 }; 79 }, 80 formatter: function(value, context) { 81 return context.chart.data.labelsData[context.dataIndex]; 82 }, 83 } 84 } 85 } 86});
あなたの回答
tips
プレビュー