일단 Google Charts로 그래프를 그려볼게요.
6649 단어 PHPJavaScript
쉬운 그래프를 그려주세요.
DB에 가입하거나 스크립트에서 토해낸 숫자를 그래프로 만들려고 할 때 CSV에 토해내서 엑셀에 가져갈 준비를 하면 사무실은 자기 컴퓨터에 없어요.GD 라이브러리로 엉망진창으로 그려야 할 줄 알았는데 서버에 넣지 못했고 (게다가 어떤 의존 문제가 있어 설치가 원활하지 못했을 때) 자바스크립트로 그래프를 그릴 수 있는 구글 차트가 편리하다.Charts? Chart?
참고 문헌
데이터 준비
매트릭스로 데이터를 전달할 수 있는arrayToDataTable 방법을 사용하기 때문에 Aray나 전용Class 근처에 데이터를 입력하면 프로그램을 쓰기 쉽다고 생각합니다.
샘플이기 때문에 데이터를 매우 잽싸게 만들어야 한다.차트 두 개를 그리기 위해 밸류스 두 개를 준비했다.<?php
error_reporting(E_ALL);
$datas=array();
for($utime=strtotime('-1 year'); $utime<time(); $utime=strtotime('+1 month',$utime))
$datas[date('Y/m',$utime)]=array(rand(0,1000),rand(0,1000));
?>
HTML 준비
헤드는 JS 인클로드 전용 하나만 주면 돼.
바디에div 등 도표를 그리는 요소를 놓습니다.이 요소에는 JS에서 호출된 id도 있습니다.<html>
<head>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
</head>
<body>
<div style="margin:20px 10px; padding:0; width:800px; height:350px;" id="graphField">Now Loading ...</div>
<script type="text/javascript">
// ここに後述のJSコードをいれてね
</script>
</body>
</html>
JavaScript 쓰기
그림 요소의 바로 아래에 script 라벨을 설정하고 그 위에 실제charts 코드를 씁니다.// この辺おまじない
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(function(){
// この辺データ
var data = google.visualization.arrayToDataTable([
['Month', 'Value1', 'Value2'],
<?php foreach($datas as $ym=>$values): ?>
['<?php echo $ym ?>', <?php echo $values[0] ?>, <?php echo $values[1] ?>],
<?php endforeach ?>
]);
// この辺グラフの描画オプション
var options = {
title: 'Graph Sample',
chartArea: {'width':'70%', 'height':'65%', 'left':65 },
hAxis: { title:'Year/Month', titleTextStyle:{italic:false} },
vAxis: { title:'Random Values', titleTextStyle:{italic:false} },
crosshair: { trigger: 'both' }
};
// この辺おまじない
var chart = new google.visualization.LineChart(document.getElementById('graphField'));
chart.draw(data, options);
});
데이터 주위
아무래도 행렬의 데이터를 주면 좋은 해석이 될 것 같아서요.
첫 번째 그룹 요소는 탭입니다.// 横軸 , 値1, 値2
['Month', 'Value1', 'Value2'],
두 번째 줄 다음은 실제 그려진 데이터입니다.<?php foreach($datas as $ym=>$values): ?>
['<?php echo $ym ?>', <?php echo $values[0] ?>, <?php echo $values[1] ?>],
<?php endforeach ?>
이렇게 쓰면...['2013/11',100,444],
['2013/12',400,512],
:
['2014/10',931,123],
이렇게 펼쳐졌을 거예요.
의외로 이렇게 처리할 때 비교적 번거로운 것은foreach나for와 같은 순환문으로 수조의 데이터를 출력할 때의 최초와 마지막 판정,'최초는 라벨','마지막 쉼표를 놓지 않는다'와 같은 마이크로스피커를 사용하는 것이다.PHP처럼 마지막 요소가 끝날 때 쉼표를 넣어도 틀리지 않고 통과할 수 있다.아마
차트 옵션
데이터 준비
매트릭스로 데이터를 전달할 수 있는arrayToDataTable 방법을 사용하기 때문에 Aray나 전용Class 근처에 데이터를 입력하면 프로그램을 쓰기 쉽다고 생각합니다.
샘플이기 때문에 데이터를 매우 잽싸게 만들어야 한다.차트 두 개를 그리기 위해 밸류스 두 개를 준비했다.<?php
error_reporting(E_ALL);
$datas=array();
for($utime=strtotime('-1 year'); $utime<time(); $utime=strtotime('+1 month',$utime))
$datas[date('Y/m',$utime)]=array(rand(0,1000),rand(0,1000));
?>
HTML 준비
헤드는 JS 인클로드 전용 하나만 주면 돼.
바디에div 등 도표를 그리는 요소를 놓습니다.이 요소에는 JS에서 호출된 id도 있습니다.<html>
<head>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
</head>
<body>
<div style="margin:20px 10px; padding:0; width:800px; height:350px;" id="graphField">Now Loading ...</div>
<script type="text/javascript">
// ここに後述のJSコードをいれてね
</script>
</body>
</html>
JavaScript 쓰기
그림 요소의 바로 아래에 script 라벨을 설정하고 그 위에 실제charts 코드를 씁니다.// この辺おまじない
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(function(){
// この辺データ
var data = google.visualization.arrayToDataTable([
['Month', 'Value1', 'Value2'],
<?php foreach($datas as $ym=>$values): ?>
['<?php echo $ym ?>', <?php echo $values[0] ?>, <?php echo $values[1] ?>],
<?php endforeach ?>
]);
// この辺グラフの描画オプション
var options = {
title: 'Graph Sample',
chartArea: {'width':'70%', 'height':'65%', 'left':65 },
hAxis: { title:'Year/Month', titleTextStyle:{italic:false} },
vAxis: { title:'Random Values', titleTextStyle:{italic:false} },
crosshair: { trigger: 'both' }
};
// この辺おまじない
var chart = new google.visualization.LineChart(document.getElementById('graphField'));
chart.draw(data, options);
});
데이터 주위
아무래도 행렬의 데이터를 주면 좋은 해석이 될 것 같아서요.
첫 번째 그룹 요소는 탭입니다.// 横軸 , 値1, 値2
['Month', 'Value1', 'Value2'],
두 번째 줄 다음은 실제 그려진 데이터입니다.<?php foreach($datas as $ym=>$values): ?>
['<?php echo $ym ?>', <?php echo $values[0] ?>, <?php echo $values[1] ?>],
<?php endforeach ?>
이렇게 쓰면...['2013/11',100,444],
['2013/12',400,512],
:
['2014/10',931,123],
이렇게 펼쳐졌을 거예요.
의외로 이렇게 처리할 때 비교적 번거로운 것은foreach나for와 같은 순환문으로 수조의 데이터를 출력할 때의 최초와 마지막 판정,'최초는 라벨','마지막 쉼표를 놓지 않는다'와 같은 마이크로스피커를 사용하는 것이다.PHP처럼 마지막 요소가 끝날 때 쉼표를 넣어도 틀리지 않고 통과할 수 있다.아마
차트 옵션
<?php
error_reporting(E_ALL);
$datas=array();
for($utime=strtotime('-1 year'); $utime<time(); $utime=strtotime('+1 month',$utime))
$datas[date('Y/m',$utime)]=array(rand(0,1000),rand(0,1000));
?>
헤드는 JS 인클로드 전용 하나만 주면 돼.
바디에div 등 도표를 그리는 요소를 놓습니다.이 요소에는 JS에서 호출된 id도 있습니다.
<html>
<head>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
</head>
<body>
<div style="margin:20px 10px; padding:0; width:800px; height:350px;" id="graphField">Now Loading ...</div>
<script type="text/javascript">
// ここに後述のJSコードをいれてね
</script>
</body>
</html>
JavaScript 쓰기
그림 요소의 바로 아래에 script 라벨을 설정하고 그 위에 실제charts 코드를 씁니다.// この辺おまじない
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(function(){
// この辺データ
var data = google.visualization.arrayToDataTable([
['Month', 'Value1', 'Value2'],
<?php foreach($datas as $ym=>$values): ?>
['<?php echo $ym ?>', <?php echo $values[0] ?>, <?php echo $values[1] ?>],
<?php endforeach ?>
]);
// この辺グラフの描画オプション
var options = {
title: 'Graph Sample',
chartArea: {'width':'70%', 'height':'65%', 'left':65 },
hAxis: { title:'Year/Month', titleTextStyle:{italic:false} },
vAxis: { title:'Random Values', titleTextStyle:{italic:false} },
crosshair: { trigger: 'both' }
};
// この辺おまじない
var chart = new google.visualization.LineChart(document.getElementById('graphField'));
chart.draw(data, options);
});
데이터 주위
아무래도 행렬의 데이터를 주면 좋은 해석이 될 것 같아서요.
첫 번째 그룹 요소는 탭입니다.// 横軸 , 値1, 値2
['Month', 'Value1', 'Value2'],
두 번째 줄 다음은 실제 그려진 데이터입니다.<?php foreach($datas as $ym=>$values): ?>
['<?php echo $ym ?>', <?php echo $values[0] ?>, <?php echo $values[1] ?>],
<?php endforeach ?>
이렇게 쓰면...['2013/11',100,444],
['2013/12',400,512],
:
['2014/10',931,123],
이렇게 펼쳐졌을 거예요.
의외로 이렇게 처리할 때 비교적 번거로운 것은foreach나for와 같은 순환문으로 수조의 데이터를 출력할 때의 최초와 마지막 판정,'최초는 라벨','마지막 쉼표를 놓지 않는다'와 같은 마이크로스피커를 사용하는 것이다.PHP처럼 마지막 요소가 끝날 때 쉼표를 넣어도 틀리지 않고 통과할 수 있다.아마
차트 옵션
// この辺おまじない
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(function(){
// この辺データ
var data = google.visualization.arrayToDataTable([
['Month', 'Value1', 'Value2'],
<?php foreach($datas as $ym=>$values): ?>
['<?php echo $ym ?>', <?php echo $values[0] ?>, <?php echo $values[1] ?>],
<?php endforeach ?>
]);
// この辺グラフの描画オプション
var options = {
title: 'Graph Sample',
chartArea: {'width':'70%', 'height':'65%', 'left':65 },
hAxis: { title:'Year/Month', titleTextStyle:{italic:false} },
vAxis: { title:'Random Values', titleTextStyle:{italic:false} },
crosshair: { trigger: 'both' }
};
// この辺おまじない
var chart = new google.visualization.LineChart(document.getElementById('graphField'));
chart.draw(data, options);
});
// 横軸 , 値1, 値2
['Month', 'Value1', 'Value2'],
<?php foreach($datas as $ym=>$values): ?>
['<?php echo $ym ?>', <?php echo $values[0] ?>, <?php echo $values[1] ?>],
<?php endforeach ?>
['2013/11',100,444],
['2013/12',400,512],
:
['2014/10',931,123],
차트 유형
마지막 주문
LineChart 근처의 여러 가지를 바꾸면 다른 도표를 만들 수 있다.다 했어!
위 X 아래 B 왼쪽 L 오른쪽 R
도시락
추기
회사 선배가 지적했다.
회사 선배가 지적했다.
JS 정렬 쓰기 마지막 쉼표
"데이터"는 복수 형식이기 때문에 데이터가 아닙니다!
Reference
이 문제에 관하여(일단 Google Charts로 그래프를 그려볼게요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/bami3/items/abce7ae683d1979e7e81텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
