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

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

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

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

Q&A

解決済

1回答

8987閲覧

Chart.jsの横棒グラフのカスタマイズ

A_T

総合スコア9

JavaScript

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

0グッド

0クリップ

投稿2018/06/27 04:49

編集2018/07/02 02:58

前提
◆時:分のグラフ
◆最小値0
◆最大値24:00

①左軸にラベルを2列表示(A時間、20:00(値)) ②左軸の上にラベルのタイトル表示(時間平均) ③バーの中心にグリッド表示 ④グリッドは隣接するバーまで伸ばさない ⑤グリッドは10分単位で表示(画像は10分単位ではありません) ⑥グリッドは60分単位で目立たせる(長くする) 上記6項目がうまくできません。 どのようにすれば,できるでしょうか。 Chart.jsを使用しておりますが、実現できないのであれば 他のライブラリを使用しても問題ありません。

html

1<canvas id="myChart" width="550" height="400"></canvas>

Javascript

1 // 縦軸ラベル 2 var datalabels = ["A時間 20:00","B時間 00:20","C時間 00:15",]; 3 // データ 4 var data = { 5 // X軸のラベル 6 labels: datalabels, 7 datasets: [{ 8 // 線の太さを指定(px) 9 borderWidth: 1, 10 hoverBorderWidth:100, // ホバー時の枠線の太さ 11 label: "時間平均", // 凡例とツールチップに表示するデータセットのラベル 12 // 背景色指定(各グラフ毎) 13 backgroundColor: [ 14 'rgba(54, 162, 235, 0.5)', 15 'rgba(255, 206, 86, 0.5)', 16 'rgba(75, 192, 192, 0.5)', 17 ], 18 //棒グラフの外枠線の色指定(グラフ毎) 19 borderColor: [ 20 'rgba(54, 162, 235, 1)', 21 'rgba(255, 206, 86, 1)', 22 'rgba(75, 192, 192, 1)', 23 ], 24 //グラフの数値 25 data: ["2000", "0020", "0015"], 26 }] 27 }; 28 29 var option = { 30 plugins: { 31 filler: { 32 propagate: true 33 } 34 }, 35 animation: { 36 duration: 0, // アニメーションストップ 37 }, 38 legend: { 39 position:'top',//ラベル上表示 40 }, 41 // 目盛の設定 42 scales: { 43 // 横軸の設定 44 xAxes: [{ 45 ticks: { // 目盛の設定 46 min: 0, // Y軸の最大値 47 max: 2400, // Y軸の最小値 48 beginAtZero: true, 49 type: "time", 50 time: { 51 unit: 'minute', 52 displayFormat: 'HH:mm', 53 }, 54 }, 55 // グリッド線の設定 56 gridLines:{ 57 drawBorder:false, 58 lineWidth:1, 59 }, 60 }], 61 //縦軸の設定 62 yAxes: [{ 63 barThickness:15, //各バーの幅 64 ticks: { 65 beginAtZero: true, //開始値を0にする 66 fontSize: 10, //フォントサイズ 67 maxRotation: 0, // 最大角度 68 minRotation: 0, // 斜めに表示 69 }, 70 }], 71 }, 72 }; 73 74 // グラフ出力 75 var ctx = document.getElementById('myChart'); 76 new Chart(ctx, { 77 type: 'horizontalBar', 78 data: data, 79 options: option, 80 }); 81

(①はlabelsに一つの文字列として入れて再現していますが)

イメージ説明

現在の表示キャプチャです。

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

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

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

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

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

m.ts10806

2018/06/27 04:57

現在の表示を画面キャプチャでご提示いただけますか?
A_T

2018/06/27 05:54 編集

返信ありがとうございます。 http://jsfiddle.net/ujza5bm2/ こちらで確認できますでしょうか。 よろしくお願いいたします。
m.ts10806

2018/06/27 09:20

いえ、外部サービスではなく質問本文に画面キャプチャを提示いただきたいのですが・・。質問は編集できるので追記してください。
A_T

2018/06/27 12:12

現在の表示キャプチャを追加しました。よろしくお願いいたします。
guest

回答1

0

ベストアンサー

chart.JSの描画はHTML5 Canvasで実装されているので、カスタマイズする場合はCanvasに自分で描画をすることになります。

拡張方法ですが、下記のページにあるように draw()の中でCanvasのメソッドを使って、座標を自分で計算して線を引く感じです。

ChartJS-Doc - extending-existing-chart-types

日本語の訳も見つけたのであわせてどうぞ
既存のグラフタイプを拡張する

投稿2018/06/27 07:06

euledge

総合スコア2404

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

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

A_T

2018/07/02 03:00

ありがとうございます。 解決にはいたっておりませんが、拡張を試してみる事にします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問