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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3099閲覧

Chart.js 2.7.1 棒グラフの色分けをしたい

stellanova

総合スコア12

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/11/05 08:22

編集2017/11/05 08:41

###前提・実現したいこと
JQuery未習熟の者です。
Chart.js 2.7.1を利用して棒グラフを作成しました。

イメージ説明

[サービス開始]以降のグラフの色を薄い赤から段々と濃い赤に指定したいと考えております。
あと、グラフ上部の[売上比率]左の四角の色も変えたいです。

https://qiita.com/tadatti/items/8a132797d2c08a644f42
上記サイトにて同様の内容の指南がありましたが、バージョンが違うようで解決に至りませんでした。

ご存知の方がいらっしゃいましたら、ご教授お願い致します。

現在のソース:

Chart.js

1<div class="container" style="width:100%"> 2<canvas id="myBarChart" width="800" height="400"></canvas> 3 4<script> 5//棒グラフ 6var ctx = document.getElementById("myBarChart"); 7var myBarChart = new Chart(ctx, { 8 //グラフの種類 9 type: 'bar', 10 //データの設定 11 data: { 12 //データ項目のラベル 13 labels: ["サービス開始前", "1年目", "2年目", "3年目"], 14 //データセット 15 datasets: [{ 16 //凡例 17 label: "売上比率", 18 //背景色 19 backgroundColor: "rgba(75,192,192,0.4)", 20 //枠線の色 21 borderColor: "rgba(75,192,192,1)", 22 //グラフのデータ 23 data: [1, 2.1, 8.1, 10.1] 24 }] 25 }, 26 //オプションの設定 27 options: { 28 //軸の設定 29 scales: { 30 //縦軸の設定 31 yAxes: [{ 32         //目盛りの設定 33 ticks: { 34 //開始値を0にする 35 beginAtZero:true, 36 } 37 }] 38 } 39 } 40}); 41</script> 42 43<script> 44var ctx = document.getElementById("myChart"); 45var myChart= new Chart(ctx, { 46 type: type, 47 data: data, 48 options: options 49}); 50</script> 51 52</div>

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

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

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

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

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

kei344

2017/11/05 08:36

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答1

0

ベストアンサー

Bar - Chart.js

borderColorbackgroundColorColorの配列を指定できるので、それで各バーの色を設定できます。

Demo

legend(凡例)の色はデータセットの色から自動で決まるようです。
試した限りではbackgroundColorは1番目のバーと同じになり、borderColorは、バーのborderColorを配列で指定するとグレーになり、そうでなければ同じ色になるようです。

投稿2017/11/05 09:28

karamarimo

総合スコア2551

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

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

stellanova

2017/11/05 11:57

karamarimo様 ありがとうございます。 なにぶん手探りな状態でして、即対応は難しいですが、文面のキーワードを基にトライしてみます。
stellanova

2017/11/07 03:12

karamarimo様 とても分かりやすいDEMOありがとうございました。 おかげさまで、ほぼ思い通りになりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問