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

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

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

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

HTML

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

Q&A

1回答

935閲覧

Chart.jsを用いたcsvファイルのグラフ化

tesura

総合スコア12

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2017/09/28 16:07

編集2017/09/28 16:09

###前提・実現したいこと
JSのライブラリーのChart.jsを使って読み込んだcsvファイルの
データのグラフ化を行いたい。

###発生している問題・エラーメッセージ

他のプログラムで出力をするとcsvがこのような出力結果になってしまい
""が邪魔で上手にグラフ化できません。

",1月,"902,432","
",2月,"862,021","
",3月,"425,133","
",4月,"771,052","
",5月,"14,9799","
",6月,"13,896","

出力のプログラムではなくchart.jsのプログラムを変更して
棒グラフ化をさせたいです。

###該当のソースコード

JavaScript

1// JavaScript Document 2// 2) CSVから2次元配列に変換 3function csv2Array(str) { 4 var csvData = []; 5 var lines = str.split("\n"); 6 for (var i = 0; i < lines.length; ++i) { 7 var cells = lines[i].split(","); 8 csvData.push(cells); 9 } 10 return csvData; 11} 12 13function drawBarChart(data) { 14 // 3)chart.jsのdataset用の配列を用意 15 var tmpLabels = [], tmpData1 = []; 16 for (var row in data) { 17 tmpLabels.push(data[row][0]) 18 tmpData1.push(data[row][1]) 19 20 }; 21 22 // 4)chart.jsで描画 23 var ctx = document.getElementById("myChart").getContext("2d"); 24 var myChart = new Chart(ctx, { 25 type: 'bar', 26 data: { 27 labels: tmpLabels, 28 datasets: [ 29 { label: "", data: tmpData1, backgroundColor: "#ffa500" }, 30 31 ] 32 } 33 }); 34} 35 36function main() { 37 // 1) ajaxでCSVファイルをロード 38 var req = new XMLHttpRequest(); 39 var filePath = '.csv'; 40 req.open("GET", filePath, true); 41 req.onload = function() { 42 // 2) CSVデータ変換の呼び出し 43 data = csv2Array(req.responseText); 44 // 3) chart.jsデータ準備、4) chart.js描画の呼び出し 45 drawBarChart(data); 46 } 47 req.send(null); 48} 49 50main(); 51

回答よろしくお願いします。

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

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

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

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

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

guest

回答1

0

" を取り除いてみてはいかがでしょう。

JavaScript

1// var lines = str.split("\n"); 2// 3 var lines = str.replace('"','').split("\n");

【String.prototype.replace() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace

投稿2017/09/28 16:19

kei344

総合スコア69407

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問