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

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

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

HighchartはHTML、SVG、VMLを使ったJavascriptの描写用ライブラリです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

Q&A

解決済

2回答

3216閲覧

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

pecchan

総合スコア555

Highcharts

HighchartはHTML、SVG、VMLを使ったJavascriptの描写用ライブラリです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

0グッド

0クリップ

投稿2018/11/13 06:22

編集2018/11/13 07:04

お世話になります。

cakephp(2.7.8)
PHP 5.6
highcharts

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

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

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

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

php

1array(3) { 2 [0]=> 3 array(1) { 4 ["MonthlyUriage"]=> 5 array(4) { 6 ["date"]=> 7 string(7) "2018/10" 8 ["uriage"]=> 9 string(3) "100" 10 11 } 12 } 13 [1]=> 14 array(1) { 15 ["MonthlyUriage"]=> 16 array(4) { 17 ["date"]=> 18 string(7) "2018/11" 19 ["uriage"]=> 20 string(3) "200" 21 22 } 23 } 24 [2]=> 25 array(1) { 26 ["MonthlyUriage"]=> 27 array(4) { 28 ["date"]=> 29 string(7) "2018/12" 30 ["uriage"]=> 31 string(3) "300" 32 } 33 } 34} 35

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

ctp

1 2$(function () { 3 $('#sample').highcharts({ 4 title: { 5 text: '月間売上' 6 }, 7 xAxis: [ 8 { 9 categories: ここの記述が分からない 10 } 11 ], 12 series: [ 13 { 14 type: 'line', // 折れ線グラフに設定 15 data: ここの記述が分からない 16 } 17 ] 18 }); 19});

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


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

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

ctp

1 2<?php if($resDscss != null && count($resDscss) > 0){ ?> 3 $('#dscss').highcharts({ 4 chart: { 5 type: 'line', 6 marginRight: 130, 7 marginBottom: 25 8 }, 9 title: { 10 text: "月間売上" 11 }, 12 xAxis: { 13 categories: ['2018/10','2018/11','2018/12'] 14 }, 15 series: [{ 16 name: 'A支店', 17 data: [400, 550, 300] 18 }] 19 ,credits: {enabled: false} 20 21 }); 22 <?php } ?> 23

イメージ説明

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

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

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

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

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

m.ts10806

2018/11/13 06:36

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

2018/11/13 06:52

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

回答2

0

ベストアンサー

簡易例:※未検証

php

1<?php 2$data = ['2018/10','2018/11','2018/12']; 3$date_list = []; 4foreach($data as $date){ 5 $date_list[] = "'{$date}'"; 6} 7?> 8~中略~ 9 10 xAxis: { 11 categories: [<?php echo implode(",",$date_list);?>] 12 }, 13~中略~

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

投稿2018/11/13 08:31

編集2018/11/13 08:35
m.ts10806

総合スコア80765

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

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

pecchan

2018/11/13 08:46

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

2018/11/13 08:46

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

2018/11/13 08:48

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

0

投稿2018/11/13 07:17

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

pecchan

2018/11/13 08:12

有難う御座います。 参照させていただきました。 画面上で、java scriptを編集して実行できる意味では「動的」ですが、 分からないのは、PHPの値を動的に設定する方法なんです。 要領悪くこのサンプルでは私には応用できませんでした。 すいません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問