前回は、HighCharts を使用して PHP と MySQL を組み合わせて折れ線グラフを生成する例を分析しました。今回は技術的な CTO を取り上げます。例として、Web サイトの検索エンジンのトラフィックを例として、highcharts を使用して円グラフを生成します。
円グラフは通常、各部分の割合を視覚的に表示する必要がある場合に使用されます。たとえば、主要な検索エンジンからのトラフィックの割合をカウントする必要があります。
ステップ 1: 各検索エンジンのトラフィックの PV 数を保存するデータベースを作成します
テーブル「パイ」を作成 (
`id` int(10) NOT NULL AUTO_INCREMENT,
`title` varchar(30) NOT NULL,
`pv` int(10) NOT NULL,
主キー (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;
ステップ 2: PHP コードを記述してデータを取得し、Highcharts がレンダリングできるデータ形式 ([ ['Baidu', 120], ['Google', 86] ]; など) でデータを解析できます。
include_once('connect.php');
$res = mysql_query("パイから * を選択");
while($row = mysql_fetch_array($res)){
//これはデフォルトで強調表示する必要があるデータを示しており、記述する必要はありません
If($row['id']==1){
$arr1[] = array(
"名前" => $row['タイトル'],
"y" => intval($row['pv']),
"スライス" => true、
"選択済み" => true
);
}その他{
$arr[] = array(
$row['title'],intval($row['pv'])
);
}
}
//配列を結合します
$arrs = array_merge($arr1,$arr);
$data = json_encode($arrs);
数値は intval に変換する必要があることに注意することが重要です。そうしないと、highcharts は数値を認識できません。
この記事は技術 CTO: http://www.jscto.net からのものです。転載する場合は出典を明記してください。
phpがデータを読み取った後、データをjson形式に整理し、クライアントによって呼び出される形式は次のとおりです。 :
category: [" School of Management",'..."]
data: [ [136,215], [147,196], .....]
クライアントは、まず Highcharts.chart を呼び出してチャートを構築し、基本的な形状を水平にグループ化された積み上げチャート
js は、Ajax を介してデータを読み込み、アイコンのカテゴリ、シリーズにデータを設定します。詳細については、まず highcharts のすべてのサンプルをご覧ください。の方が適している場合は、それを直接コピーして、データを変更する方法を見つけてください。
Highcharts を使用して円グラフを生成する (円グラフのセクターをクリックしてリンクにジャンプするなど) クリック イベントを円グラフに追加する方法。
サンプルを作成します
www.bkjia.com
true