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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

JavaScript

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

HTML

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

CSS

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

Q&A

解決済

1回答

2116閲覧

chart.jsを画像としてダウンロードした際、背景が黒くなる問題を解決したい。

退会済みユーザー

退会済みユーザー

総合スコア0

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/10/23 15:15

編集2019/10/29 14:06

chart.jsで簡易的なグラフを作成し、これをクリックで画像としてダウンロード出来るようにしたのですが、そのままダウンロードすると背景色が黒くなってしまいます。
色々調べたのですが、背景色の指定の仕方が分からず困っています。
何方かアドバイスお願いします。

イメージ説明

html

1<canvas id="Chart"></canvas> 2<button id="download_button">ダウンロード</button> 3<a id="download_link"></a> 4 5<script> 6 var ctx = document.getElementById('Chart').getContext('2d'); 7 var myChart = new Chart(ctx, { 8 type: 'bar', 9 data: { 10 labels: ['M', 'T', 'W'], 11 datasets: [{ 12 label: 'リンゴ', 13 data: [12, 19, 3], 14 backgroundColor: "rgba(153,255,51,0.4)" 15 }, { 16 label: 'みかん', 17 data: [2, 29, 5], 18 backgroundColor: "rgba(255,153,0,0.4)" 19 }] 20 } 21 }); 22</script> 23 24<script> 25 window.onload = function(){ 26 27 var canvas = document.getElementById('Chart'); 28 var downloadLink = document.getElementById('download_link'); 29 var filename = 'chart.png'; 30 31 var button = document.getElementById('download_button'); 32 button.addEventListener('click', function(){ 33 34 if (canvas.msToBlob) { 35 var blob = canvas.msToBlob(); 36 window.navigator.msSaveBlob(blob, filename); 37 } else { 38 downloadLink.href = canvas.toDataURL('image/png'); 39 downloadLink.download = filename; 40 downloadLink.click(); 41 } 42 43 }); 44 45 }; 46</script>

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

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

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

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

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

guest

回答1

0

ベストアンサー

Chart.js canvas 背景色」で検索したらいくつか当該内容について触れている記事があります。
canvas 自体に背景色を付けるようです。

【Chart.js 図全体背景色、グラフエリア背景色、イメージダウンロードの問題を解決する - Oboe吹きプログラマの黙示録】
http://oboe2uran.hatenablog.com/entry/2018/01/27/181126

【Chart.jsのcanvas画像ダウンロード背景色問題の解決方法 | Tips of Rubbish】
http://wordpress.ideacompo.com/?p=12888

投稿2019/10/23 16:31

kei344

総合スコア69407

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問