再投稿: Google チャートで曲線とヒストグラムを使用する方法を 1 分で説明します

再投稿: Google チャートで曲線とヒストグラムを使用する方法を 1 分で教えます

元のアドレス: http://2sitebbs.com/thread-671-1-1.html


Google のグラフ API が優れていることに疑いの余地はありません。
非常に安定した柔軟なグラフ作成ソリューション。

以下に簡単な例を示します。
これは、Google グラフ、特に折れ線グラフ (LineChart) と縦棒グラフ (ColChart) を使用する必要がある友人に、迅速な統合ヘルプを提供するように設計されています。

Google チャートの曲線または棒グラフをすばやく統合する詳細な手順は次のとおりです:

1. ステップ 1: Google の JavaScript API ファイルを Web ページに導入します
Web ページの HTML コードに次のコードを追加します:
<スクリプト src="https://www.google.com/jsapi">
コードをコピー
注:
このファイルは、Google Chart を呼び出す JS コードの前に導入する必要があります。

2. ステップ 2: 曲線および棒グラフの JS パッケージ関数コードを Web ページに導入します。
外部 js ファイルを直接導入します:
<スクリプト src="http://usedcar/js/search-min.js">
コードをコピー

または、次の単純なカプセル化関数を JS コードに追加します:
/**
* チャート用の関数
* --パラメータの説明--
* sId: Google アイコンの表示に使用されるラベルの ID 名
* sType: チャートのタイプ、曲線チャートまたは棒チャート。オプ​​ションの値:col および line
。 * sTitle: チャートのタイトル
* oData: チャート データは 2 次元配列です。最初の要素は x 軸と y 軸のタイトルです。形式は [['x 軸のデータ タイトル', 'y 軸のデータ タイトル'] です。 , ['xValue 1', 'yValue 1'], ...]
※max:y軸高さの最大値
*/
関数 showChart(sId, sType, sTitle, oData, max) {
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function() {
var data = google.visualization.arrayToDataTable(oData);

var オプション = {
title: sタイトル、
幅: 720、
身長: 200、
chartArea: {左: 30、幅: '98%'、上: 25、高さ: '75%'}、
titleTextStyle: {color:'#666', fontSize: '14px'},
curveType: "関数",
vAxis: {maxValue: max}
};

If (sType == 'line') {
var chart = new google.visualization.LineChart(document.getElementById(sId));
}else if (sType == 'col'){
var chart = new google.visualization.ColumnChart(document.getElementById(sId));
}
chart.draw(data, options);
});
}
コードをコピー

3. ステップ 3: PHP を例としてチャート データを組み立てます。 サンプルコード:
//グラフの X 軸と Y 軸のデータ タイトルを設定します
$oDataCity = array(array('City', '平均価格/10,000'));
//$citys は、複数の都市データを保存するデータベースからクエリを実行する配列です。cityName とprice
の 2 つのフィールドが含まれます。 foreach ($citys as $key => $val) {
$oDataCity[] = array($val['cityName'], $val['price']);
}
コードをコピー

4. ステップ 4: データを JS コードに出力し、showChart() 関数を呼び出してチャートを表示します。 サンプルコード:
//パラメータを準備します
$sData = json_encode($oDataCity);
$chartType = 'col';
$chartTitle = '全国主要都市の売れ筋中古車ブランドランキング';
$maxXValue = 100;

//表示チャート関数を呼び出すjsコードを出力します
エコー << <スクリプト>
(関数(){
var sId = 'gchart',
    sType = '{$chartType}',
    sTitle = '{$chartTitle}';