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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

9225閲覧

chart.jsで境界線以降を塗りつぶしたい。

natady

総合スコア606

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2017/03/01 11:52

編集2017/03/01 11:56

chart.jsを使ってグラフを表示する機能を実装しています。
chart.jsのドキュメントを一通り見ましたが見つからなかったので質問させていただきます。

下の画像の黄色領域のように、ある境界線(左から数えて7つ目の予定)から奥までを任意の色で埋めることはchart.jsの機能で可能でしょうか?
イメージ説明

この質問の画像の右領域に色がつくイメージです。

chart.jsのバージョンは2.5.0です。

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

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

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

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

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

guest

回答1

0

自己解決

この質問を参考にcanvasに直接描画する方法で解決しました。

以下コード

javascript

1var chartData = { 2 labels : xLabels, // x軸ラベル 3 datasets : datasets, // データ値など 4 lineAtIndex: 6, // 境界線を表示するインデックス 5}; 6 7// オプション類 8var options = { 9101112}; 13 14// グラフ描画(拡張) 15var ctx = document.getElementById("graph").getContext("2d"); 16var originalLineDraw = Chart.controllers.line.prototype.draw; 17Chart.helpers.extend( 18 Chart.controllers.line.prototype, 19 { 20 draw: function() { 21 // 元々の線グラフを描画 22 originalLineDraw.apply(this, arguments); 23 24 var chart = this.chart; 25 var ctx = chart.chart.ctx; 26 27 var index = chart.config.data.lineAtIndex; 28 if (index) { 29 var xaxis = chart.scales['x-axis-0']; 30 var yaxis = chart.scales['y-axis-0']; 31 32 // 境界線描画 33 ctx.save(); 34 ctx.beginPath(); 35 ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top); // 描画開始位置 36 ctx.strokeStyle = '#ff0000'; 37 ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom); // 描画終了位置 38 ctx.stroke(); 39 ctx.restore(); 40 41 // 四角形描画 42 ctx.save(); 43 ctx.fillStyle = "rgba(255, 255, 0, 0.05)"; //塗りつぶす色 44 ctx.fillRect( 45 xaxis.getPixelForValue(undefined, index), // x座標 46 yaxis.top, // y座標 47 xaxis.width, // 幅 48 yaxis.height // 高さ 49 ); 50 ctx.restore(); 51 } 52 } 53 } 54); 55new Chart( 56 ctx, 57 { 58 type : "line", 59 data : chartData, 60 options : options, 61 } 62);

イメージ説明

投稿2017/03/01 13:19

編集2017/03/01 13:21
natady

総合スコア606

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問