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

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

ただいまの
回答率

90.23%

javascriptとAjax?での値受け渡し

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,862

abbey000

score 5

javascriptとAjax?での値受け渡し

chart.js
を使ってグラフの表示に挑戦しているのですが
同じJS内下記部分
data:[231,462,693];
へCSVから取得した値を入れたいのですが
うまくいきません。
※値の渡し方をわかっておりません
(CSVの取得はjQuery.csv.jsを使用させていただいて取り込めました
http://cly7796.net/wp/javascript/ajax-get-csv/)

hrml内には
231,462,693と表示されたのですがどうすれば良いのか
教えていただけませんでしょうか。

chart.thml

コード
<!DOCTYPE html>
<html lang="en">
<style>
@media screen and (min-width: 768px) {
  .chart_container {
    width: 640px;
    margin: auto;
  }
}
</style>
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/jQuery.csv.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script src="js/mychart.js"></script>
    <title>A</title>
</head>
<body>

<!--ここにグラフが挿入されます-->
<div style="width: 600; height: 600;">
    <canvas id="myChart" style="width: 100%; height: auto;"></canvas>
</div>
<br/>
<form name="pullForm">
    <select name="pullMenu">
        <option value="a_data.csv">a_data.csv</option>
        <input type="hidden" name="graph_title" value="グラフタイトル">
        <input type="hidden" name="target_title" value="グラフタイトル2">
    </select>
</form>

<!--ボタンを押すとリロードします。-->
<input type="button" id="update_chart" value="グラフ表示" onclick="main()"/>
<!--ここにCSVデータが挿入されます-->
<div id="news"></div>
</body>
</html>


a_data.csv

1, 3, 22, 6
2, -24, 15, 8
3, -20, 32, 15


data.csv

日付,目標
1,231
2,462
3,693

mychart.js

function csv2Array(str) {
    var csvData = [];
    //CR削除
    str = str.replace(/\r\n/g, '\n');
    //空行削除
    str = str.replace(/\n+/g, '\n');
    //空白削除
    str = str.replace(/\s+,|,\s+/g, ',');
    var lines = str.split('\n');
    for (var i = 0; i < lines.length; i++) {
        var cells = lines[i].split(",");
        csvData.push(cells);
    }
    return csvData;
}

var insert = '';
var csvList;
$(function t_csv(){
    var target_csv = '#news';
    $.ajax({
        dataType: 'text',
        url: 'h_j_t_data2.csv',
        success: function(data) {
            csvList = $.csv()(data);
            for(var i = 1, n = csvList.length; i < n; i++){
                insert += ( csvList[i][1] + ( i!=n-1 ? "," : "" ) );
            }
            $(target_csv).append(insert);
        }
    });
});


// リクエストにjqueryを利用する場合
function main_jquery() {
    var csvData = $.ajax({
    //グラフ表示内容取得
    //url: 'j_data.csv',
    url: document.pullForm.pullMenu.value,
    dataType: 'text',
    cache: false
    //cache: true
    }).then(function (resText) {
        var data = csv2Array(resText);
        drawBarChart(data)
    })
}


//colormapもどき
function mycolmap(l) {
    function rgbaStr(rgba) {
    return 'rgba(' + rgba.join(',') + ')';
    }
    var cStr = [];
    var color_from = [54, 162, 235, 0.3];
    var color_to = [255, 99, 132, 0.3];
    var l1 = l - 1;
    for (var i = 0; i < l; i++) {
        var c = [];
        var j = 0;
        for (; j < 3; ++j) {
            c[j] = Math.floor(color_from[j] * (l1 - i) / l1 + color_to[j] * (i) / l1);
        }
        // alpha doesn't need floor
        c[j] = color_from[j] * (l1 - i) / l1 + color_to[j] * (i) / l1;
        cStr[i] = rgbaStr(c)
    }
    return cStr;
}

//common part

function drawBarChart(data) {

    // set chart labels and data
    var tmpLabels = [];
    var dataList = [];
    //var nameList2 = ["A", "B", "C"];
    var nameList = ["D", "E", "F"];

    //先頭行の列数からデータ数を導出する
    var numData = data[0].length-1;
    var bgcolList = mycolmap(numData);

    for (var i = 0; i < numData; i++) {
        dataList[i] = [];
    }

    for (var row in data) {
        tmpLabels.push(data[row][0])
        for (var i = 0; i < numData; i++) {
            dataList[i].push(data[row][i+1]);
        }
    };

    var datasetList = [];
    for (var i = 0; i < numData; i++) {
        datasetList.push({
            label: nameList[i],
            backgroundColor: bgcolList[i],
            data: dataList[i]
        });
    }

    datasetList.push({
        type: 'line',
        label: document.pullForm.target_title.value,
        scaleShowLabels : false,
        backgroundColor: "rgba(70, 150, 150, 1)",
        fill: false,
        //data:arr;
        data:[231,462,693]/////CSVから値を入れたい箇所/////
    });
    var chartData = {
        labels: tmpLabels,
        datasets: datasetList
    };

    var ctx = document.getElementById("myChart").getContext("2d");
    ctx.canvas.width = 1000;
    ctx.canvas.height = 600;
    // for chart.js 2.0

    var myChart = new Chart(ctx, {
        type: 'bar',
        data: chartData,
        options: {
            title: {
                display: true,
                text: document.pullForm.graph_title.value, //グラフの見出し
                padding:6
            },
            scales: {
                xAxes: [{
                    stacked: true, //積み上げ棒グラフにする設定
                    ticks: {
                        autoSkip: false,
                        maxRotation: 90,
                        minRotation: 90
                    }
                }],
                yAxes: [{
                    stacked: true,//積み上げ棒グラフにする設定
                    scaleLabel: {
                        display: true,
                        labelString: 'TEST',
                        fontSize: 14
                    }
                }]
            },
            legend: {
                display: true,
                position: 'right'
            }
        }
    });

}

// ここがメイン
function main() {
  main_jquery();
}

main();
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/12/05 18:56

    質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、プラグイン/ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。(URLにはリンクを張ることができます)

    キャンセル

  • abbey000

    2016/12/05 19:38

    アドバイスありがとうございます、編集しました。すこしでも見やすくなっていれば良いのですが

    キャンセル

  • kei344

    2016/12/06 12:34

    回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。

    キャンセル

  • abbey000

    2016/12/06 12:53

    何度もすみませんでした。コードもできるだけ整理して全部記載してみました。

    キャンセル

回答 1

checkベストアンサー

+2

手元で試していないのですが、こういう感じでしょうか。datasetListが後で何かに使われている気がしますが、かかれていないので考慮していないです。

$( function() {
    $.ajax( {
        url: 'data.csv',
        success: function( data ) {
            var arr = [], csvList = $.csv()( data ), i, n;
            for ( i = 1, n = csvList.length; i < n; i++ ) {
                arr.push( csvList[ i ][ 1 ] );
            }
            datasetList.push( {
                type: 'line',
                label: 'グラフのラベル',
                scaleShowLabels : false,
                backgroundColor: 'rgba( 70, 150, 150, 1 )',
                fill: false,
                data: arr
            } );

        }
    } );
} ); // 未テスト

追記:

元質問が編集されてしまっているため、無意味な回答になっています。下記「2016/12/05 19:32 投稿」に対して回答しました。

【質問編集履歴|teratail(テラテイル)】
https://teratail.com/questions/history-questions/57696

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/06 12:16

    >datasetListが後で何かに使われている気がしますが、かかれていないので考慮していないです。
    おっしゃるとおりで別の場所で使用しておりました。
    いろいろなサイトを参考にあれこれしながら、書いていたのを整理してみました。

    キャンセル

  • 2016/12/06 14:19

    どのように解決したかコードを回答欄に追記いただけませんか?このページに辿り着いた同じ疑問を持つ人のために、ぜひお願いします。
    また、私の回答ではなくその解決方法をもって「解決済」にされることをお勧めします。

    キャンセル

  • 2016/12/06 14:22

    初期の質問内容では、回答いただいたソースで間違いなさそうなので
    ベストアンサーに選ばせていただきました。

    >元質問が編集されてしまっているため、無意味な回答になっています。下記「2016/12/05 19:32 投稿」に対して回答しました。

    となっており、確かに質問のソースを変えてしまえば無意味な回答になりますね
    すみませんでした。改めて質問をしなおします。

    キャンセル

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

  • ただいまの回答率 90.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる