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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

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

Q&A

解決済

1回答

2767閲覧

chart.jsの棒グラフの色をグラデーションにする方法

ArisaProgrammer

総合スコア16

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2019/03/20 07:51

先程質問したばかりですが、再びお願いします。

【質問】
chart.jsで表示した棒グラフの色をグラデーションにしたいと考えております。
グラデーションの仕方は、下から上にいくにつれて明るくする形にしたいと考えております。
その場合、どのように記述すればよろしいでしょうか。

他サイトをいくつか参照しやってみましたが、うまくいきません。
教えていただければ幸いです。

記述は以下の通りとなります。
※graph.phpを作り、そこに記述している。

<canvas id="sample" width="380" height="330" style="display: block;"></canvas> <script> var $value = <?php echo $value; ?>; var ctx = document.getElementById("sample").getContext('2d'); var sample = new Chart(ctx, { type: 'bar', title: "◯◯", data: { labels: [["◯◯","◯◯"], ["◯◯","◯◯"], ["◯◯","◯◯"], ["◯◯","◯◯"], ["◯◯","◯◯"]], datasets: [{ label: '◯◯', lineTension: 0, fill: false, backgroundColor: "#cb207c", borderWidth: 1, data: [ <?php $hogehoge = 1; if(get_field('hogehoge',$value)){ $hogehoge = get_field('hogehoge',$value); }; echo $hogehoge; ?>, ], }, { label: '◯◯', lineTension: 0, fill: false, backgroundColor: "#cb207c", borderWidth: 1, data: [ <?php $hogehoge = 1; if(get_field('hogehoge',$value)){ $hogehoge = get_field('hogehoge',$value); }; echo $hogehoge; ?>, ], }, { label: "◯◯", lineTension: 0, fill: false, backgroundColor: "#cb207c", borderWidth: 1, data: [ <?php $hogehoge = 1; if(get_field('hogehoge',$value)){ $hogehoge = get_field('hogehoge',$value); }; echo $hogehoge; ?>, ], }, { label: "◯◯", lineTension: 0, fill: false, backgroundColor: "#cb207c", borderWidth: 1, data: [ <?php $hogehoge = 1; if(get_field('hogehoge',$value)){ $hogehoge = get_field('hogehoge',$value); }; echo $hogehoge; ?>, ], }, { label: "◯◯", lineTension: 0, fill: false, backgroundColor: "#cb207c", borderWidth: 1, data: [ <?php $hogehoge = 1; if(get_field('hogehoge',$value)){ $hogehoge = get_field('hogehoge',$value); }; echo $hogehoge; ?>, ], }, ] }, options: { responsive: false, legend: { display: false }, scales: { yAxes: [{ ticks: { stepSize: 25, beginAtZero: true, min: 0, max: 100, display:false }, gridLines: { drawTicks:false, drawBorder:false, lineWidth:2, borderDash:[8,8], color:'black', } }], xAxes: [{ categoryPercentage: 1.0, barPercentage: 0.7, ticks: { fontColor:'white', fontFamily:'ほげほげ', fontSize:16 }, gridLines: { display:false } }] } } }); </script>

よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

サンプル

スマートな方法とは思いませんが、昔グラフ作ったときは
1.もっとも濃い色と薄い色の値(RGB値)を決める(例:薄い⇒f7fbff、濃い⇒084594)
2.グラフの凡例の数を決める(例:上のグラフだと7つ)
3.(f7fbff-084594)/6をして、f7fbffに加えていって、凡例ごとのRGB値を決める
4. backgroundColorに3で求めたそれぞれの値を入れる
とやりました。

投稿2019/03/20 16:44

dett

総合スコア115

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

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

ArisaProgrammer

2019/03/22 01:24

ご回答いただき、ありがとうございます! 確かに、そういうやり方がありますね!! 一度、やってみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問