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

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

ただいまの
回答率

88.57%

【PHP + Hightcharts】動的に折れ線グラフを作成する記述が分かりません

解決済

回答 2

投稿 編集

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

pecchan

score 351

お世話になります。

cakephp(2.7.8)
PHP 5.6
highcharts

DBから取得した月間売上結果を折れ線グラフで出力したいです。

色々なサンプルなど見ましたが、ここここも固定値で設定しており、DB結果を設定するような動的な方法が分からずにいます。

作りたい折れ線グラフは基本的な形で、
横軸に、'2018/10'、'2018/11'などの年月
縦軸に、100万円、200万円などの売上金
です。

PHPのコントローラ側で取得した配列は以下のような構造になっています。
これをビューに渡すところまで出来ました。

array(3) {
  [0]=>
  array(1) {
    ["MonthlyUriage"]=>
    array(4) {
      ["date"]=>
      string(7) "2018/10"
      ["uriage"]=>
      string(3) "100"

    }
  }
  [1]=>
  array(1) {
    ["MonthlyUriage"]=>
    array(4) {
      ["date"]=>
      string(7) "2018/11"
      ["uriage"]=>
      string(3) "200"

    }
  }
  [2]=>
  array(1) {
    ["MonthlyUriage"]=>
    array(4) {
      ["date"]=>
      string(7) "2018/12"
      ["uriage"]=>
      string(3) "300"
    }
  }
}

上記のような場合、ビュー側(ctp)にて
series:のnameやdataにどのように設定すれば良いでしょうか?

$(function () {
    $('#sample').highcharts({
        title: {
            text: '月間売上'
        },
        xAxis: [
            {
                categories: ここの記述が分からない
            }
        ],
        series: [
            { 
                type: 'line', // 折れ線グラフに設定
                data: ここの記述が分からない
            }
        ]
    });
});

分かる方教えていただけないでしょうか?
どうぞ宜しくお願い致します。


2018/11/13
固定値による例示を追加

欲しい形は以下のような形です。
実際のコードに「固定値」を設定してみました。
※固定値なのでグラフ表示できてます。

<?php if($resDscss != null && count($resDscss) > 0){ ?>
                $('#dscss').highcharts({
                    chart: {
                        type: 'line',
                        marginRight: 130,
                        marginBottom: 25
                    },
                    title: {
                        text: "月間売上"
                    },
                    xAxis: {
                        categories: ['2018/10','2018/11','2018/12']
                    },
                    series: [{
                        name: 'A支店',
                        data: [400, 550, 300]
                    }]
                    ,credits: {enabled: false}

                });
            <?php } ?>


イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2018/11/13 15:36

    このJavaScriptの記述はテンプレートファイルに直接書いてますか?DBから取得した情報をctpで表示はできるのですよね?「このような形にしたい」というのを固定値で例示していただけますか?基本はフレームワーク関係なく、PHPの配列情報を文字列としてJavaScriptで使えるような形で出力するケースと変わりません。

    キャンセル

  • pecchan

    2018/11/13 15:52

    有難う御座います。 はい。ctpで表示する所まで出来ております。固定値を例示させていただきます。宜しくお願い致します。

    キャンセル

回答 2

checkベストアンサー

+2

簡易例:※未検証

<?php
$data = ['2018/10','2018/11','2018/12'];
$date_list = [];
foreach($data as $date){
  $date_list[] = "'{$date}'";
}
?>
~中略~

                    xAxis: {
                        categories: [<?php echo implode(",",$date_list);?>]
                    },
~中略~

要は「静的データで表示できるような文字列」をPHPで作ってそこにechoするだけです。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/13 17:46

    有難う御座います。

    >要は「静的データで表示できるような文字列」をPHPで作ってそこにechoするだけ
    本当にこれだけなんですね、難しく考えていました・・・。

    肝に命じます。

    キャンセル

  • 2018/11/13 17:46

    個人的にはAjaxで取ってきたい。

    キャンセル

  • 2018/11/13 17:48

    そうですね。
    htmlもjavascriptもCSSも元は「単なる文字列」です。ブラウザから確認するから効果を発揮するだけと考えたら、もう少しやりやすくなるかもしれません。

    キャンセル

+1

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/13 17:12

    有難う御座います。
    参照させていただきました。

    画面上で、java scriptを編集して実行できる意味では「動的」ですが、
    分からないのは、PHPの値を動的に設定する方法なんです。

    要領悪くこのサンプルでは私には応用できませんでした。
    すいません。

    キャンセル

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

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

関連した質問

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