質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

6859閲覧

Chart.jsを用いたグラフのカスタマイズに関して

aa316316

総合スコア39

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2019/01/21 14:07

前提・実現したいこと

現在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});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2019/01/30 08:49

「右側bar」がどの部分を指すのかわからないので図示してください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問