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

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

ただいまの
回答率

90.84%

  • JavaScript

    14852questions

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

CanvasJSでグラフがうまく表示できない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 79

M.Nishimura

score 18

 前提・実現したいこと

CanvasJSで外部から受け取ったデータを表示したい

グラフの自動描画ライブラリを使用してグラフを動的に表示させたいと
考えております。
https://canvasjs.com/javascript-charts/

あるfunctionで動的に配列データを生成してそれを渡して
そこからグラフを生成しようとしていますがうまくいきません。
どうすれば外部からのデータをうまく渡してグラフ描画できるか
ご教示いただけますでしょうか。

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

エラーメッセージは出ていないのですが、指定形式(配列)でデータを
渡してもうまくデータが表示されません。
console.logでデータを参照してみても綺麗にデータは
渡ってきているようです。

イメージ説明

 該当のソースコード

//データ生成用のfunction
var graphData = new Array();     //(1)
function getCalcResult() {
    for (var i= Number(tlife[rFlg][0]) ; i < dethYear ; i++) {
        // ~計算ロジック類~:今回の不具合とは関係ない
        oHtml=oHtml+'</tr>'
        var tGdata = '{label:' + i + ', y:' + bl +'}';
        graphData.push(tGdata);
    }
    var oHtml= oHtml + '</table>'
    elm.innerHTML = oHtml;
    renderGraph(graphData); //(2)
}

//グラフ描画用のfunction
graphData = []; //(3)
function renderGraph(graphData){
    //gDataは配列でなければいけない。
    console.log(graphData);  //(4)
    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        theme: "light2",
        data: [{
            // グラフの種類を設定する
            type: 'column',
            // グラフに描画するデータを設定する
            dataPoints:[graphData] //(5)
            }]
    });
    chart.render();
}

 試したこと

(5)の位置に(4)で出力されている下記のデータを貼り付けると
うまくグラフ描画できました。

[{label:30, y:168},{label:31, y:172},{label:32, y:58},{label:33, y:-68},{label:34, y:-430},{label:35, y:-792},{label:36, y:-1175},{label:37, y:-1558},{label:38, y:-1924},{label:39, y:-2290},{label:40, y:-2622},{label:41, y:-2925},{label:42, y:-3243},{label:43, y:-3503},{label:44, y:-3759},{label:45, y:-4013},{label:46, y:-4259}]


(4)の位置では値はArrayとしてきちんと渡ってきておりました。
(1)の位置で配列宣言しないと(4)ではundefineになってしまいます。

 補足情報(FW/ツールのバージョンなど)

CanvasJSを使っています。
https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

check解決した方法

+1

ライセンスの関連もあったので、結局chart.jsを使うことにしました。
graphDataについては数値のみの配列なので綺麗に取り出せているみたいです。

色々とご教示いただきありがとうございました。

function renderGraph(){
    var ctx = document.getElementById('chartContainer').getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: graphLabels,
        datasets: [{
        label: '収支',
        data: graphData1,
        borderColor: "black",
        //backgroundColor: "blue",
        fill:false
        }]
    }
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/06/25 11:04

    解決できたようで何よりです。
    ですが、私の回答が直接解決に至っていないのであればこちらの回答をベストアンサーにされた方が良いです。
    同じような問題をかかえた人が後から見たときに一番先に目に付くのはベストアンサーのついた回答です。

    キャンセル

  • 2018/06/25 15:50

    すいません。ご指摘ありがとうございます。

    キャンセル

+1

インデントが揃っていなくて読みづらいのですが、
単に配列の階層があってないだけでは?

(5)の位置に(4)で出力されている下記のデータを貼り付けると
うまくグラフ描画できました。

とあるので質問内容にある下記では1つ多く配列を作ってしまっているということですよね。

dataPoints:[graphData]

以下ではどうですか?

dataPoints:graphData

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/06/22 15:54

    ありがとうございます。修正してみると下記のエラーになりました。

    SCRIPT5007: 未定義または NULL 参照のプロパティ 'getTime' は取得できません canvasjs.min.js (96,308)

    キャンセル

  • 2018/06/22 15:57 編集

    結局nullになってる気がします。
    {}の数が合っていませんし、コードの見直し、インデントきちんとしてもらって良いですか?

    キャンセル

  • 2018/06/22 16:10

    インデント修正いたしました。申し訳ありません。
    graphDataの内容を確認すると以下の通りです。その後で

    SCRIPT5007: 未定義または NULL 参照のプロパティ 'getTime' は取得できません canvasjs.min.js (96,308)

    となっております。

    {x:30, y:168},{x:31, y:172},{x:32, y:58},{x:33, y:-68},{x:34, y:-430},{x:35, y:-792},{x:36, y:-1175},{x:37, y:-1558},{x:38, y:-1924},{x:39, y:-2290},{x:40, y:-2622},{x:41, y:-2925},{x:42, y:-3243},{x:43, y:-3503},{x:44, y:-3759},{x:45, y:-4013},{x:46, y:-4259},{x:47, y:-4505},{x:48, y:-4655},{x:49, y:-4805},{x:50, y:-4755},{x:51, y:-4705},{x:52, y:-4605},{x:53, y:-4505},{x:54, y:-4405},{x:55, y:-4305},{x:56, y:-4205},{x:57, y:-4105},{x:58, y:-4005},{x:59, y:-3905},{x:60, y:-3805},{x:61, y:-3705},{x:62, y:-3605},{x:63, y:-3505},{x:64, y:-3405},{x:65, y:-1860},{x:66, y:-1970},{x:67, y:-2080},{x:68, y:-2190},{x:69, y:-2300},{x:70, y:-2410},{x:71, y:-2520},{x:72, y:-2630},{x:73, y:-2740},{x:74, y:-2850},{x:75, y:-2960},{x:76, y:-3070},{x:77, y:-3180},{x:78, y:-3290},{x:79, y:-3400},{x:80, y:-3510},{x:81, y:-3620}
    [
    [0...9]: [
    0: "{x:30, y:168}",
    1: "{x:31, y:172}",
    2: "{x:32, y:58}",
    3: "{x:33, y:-68}",
    4: "{x:34, y:-430}",
    5: "{x:35, y:-792}",
    6: "{x:36, y:-1175}",
    7: "{x:37, y:-1558}",
    8: "{x:38, y:-1924}",
    9: "{x:39, y:-2290}"
    ],
    [10...19]: [
    10: "{x:40, y:-2622}",
    11: "{x:41, y:-2925}",
    12: "{x:42, y:-3243}",
    13: "{x:43, y:-3503}",
    14: "{x:44, y:-3759}",
    15: "{x:45, y:-4013}",
    16: "{x:46, y:-4259}",
    17: "{x:47, y:-4505}",
    18: "{x:48, y:-4655}",
    19: "{x:49, y:-4805}"
    ],
    [20...29]: [
    20: "{x:50, y:-4755}",
    21: "{x:51, y:-4705}",
    22: "{x:52, y:-4605}",
    23: "{x:53, y:-4505}",
    24: "{x:54, y:-4405}",
    25: "{x:55, y:-4305}",
    26: "{x:56, y:-4205}",
    27: "{x:57, y:-4105}",
    28: "{x:58, y:-4005}",
    29: "{x:59, y:-3905}"
    ],
    [30...39]: [
    30: "{x:60, y:-3805}",
    31: "{x:61, y:-3705}",
    32: "{x:62, y:-3605}",
    33: "{x:63, y:-3505}",
    34: "{x:64, y:-3405}",
    35: "{x:65, y:-1860}",
    36: "{x:66, y:-1970}",
    37: "{x:67, y:-2080}",
    38: "{x:68, y:-2190}",
    39: "{x:69, y:-2300}"
    ],
    [40...49]: [
    40: "{x:70, y:-2410}",
    41: "{x:71, y:-2520}",
    42: "{x:72, y:-2630}",
    43: "{x:73, y:-2740}",
    44: "{x:74, y:-2850}",
    45: "{x:75, y:-2960}",
    46: "{x:76, y:-3070}",
    47: "{x:77, y:-3180}",
    48: "{x:78, y:-3290}",
    49: "{x:79, y:-3400}"
    ],
    [50...51]: [
    50: "{x:80, y:-3510}",
    51: "{x:81, y:-3620}"
    ],
    length: 52
    ]

    キャンセル

  • 2018/06/22 16:17

    試してもらいたいのが
    ・(3)の記述を削除する
    ・renderGraph()の引数を無しにする。
    ・(4)の値を確認
    ・で、dataPoints:graphData

    graphData はグローバルで宣言されているので、引数で渡さなくても値を入れていったものが使えるはずです。

    キャンセル

  • 2018/06/22 16:43

    ありがとうございます。試してみた結果は以下の通りです。

    ・(3)の記述削除
    →SCRIPT5007: 未定義または NULL 参照のプロパティ 'getTime' は取得できません

    ・renderGraph()の引数を無しにする。
    ・(4)の値を確認
    →objectArrayでデータは入っているようです。

    ・で、dataPoints:graphData
    →SCRIPT5007: 未定義または NULL 参照のプロパティ 'getTime' は取得できません

    キャンセル

  • 2018/06/22 16:59

    データとってこれている前提もあったのであまり気にしてませんでしたが、
    getCalcResult() ってどこから呼び出されているのでしょう?
    その中のforで使われている条件の変数の出所も気になります。
    データが入っているなら「SCRIPT5007」のエラーは出なさそうなものですけど・

    キャンセル

  • 2018/06/22 17:07

    getCalcResult()の呼出部分です。HTML内に埋め込んでいます。
    <script type="text/javascript">
    function getCalcResult() {
    ~略~
    }
    function renderGraph(){
    ~略~
    }
    window.onload = getCalcResult;
    </script>

    forの条件についてはgetCalcResult() のforの直接上で
    変数を取ってきています。この部分についてはテーブルに
    データを吐き出せているのできちんと動作しています。

    キャンセル

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

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

関連した質問

同じタグがついた質問を見る

  • JavaScript

    14852questions

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