Highcharts+PHP+Mysql生成餅狀統計圖
演示下載地址:http://www.erdangjiade.com/js/50.html
效果圖:
效果圖:
- Mysql
- 首先我們建一張·chart_pie·表作為統計資料。
- —
- — 表的結構 `chart_pie`
- —
- CREATE TABLE IF NOT EXISTS `chart_pie` (
- `id` int(11) NOT NULL AUTO_INCREMENT,
- `title` varchar(30) NOT NULL,
- `pv` int(10) NOT NULL,
- PRIMARY KEY (`id`)
- ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;
- —
- — 轉存表中的資料 `chart_pie`
- —
- INSERT INTO `chart_pie` (`id`, `title`, `pv`) VALUES
- (1, `百度`, 1239),
- (2, `google`, 998),
- (3, `搜搜`, 342),
- (4, `必應`, 421),
- (5, `搜狗`, 259),
- (6, `其他`, 83);
- PHP
- 在pie.php我們要生成資料給前端呼叫:
- $query = mysql_query(“select * from chart_pie”);
- while($row = mysql_fetch_array($query)){
- $arr[] = array(
- $row[`title`],intval($row[`pv`])
- );
- }
- $data = json_encode($arr);
- jQuery
- $(function() {
- $(`#highcharts`).highcharts({
- chart: {
- renderTo: `chart_pie`,
- //餅狀圖關聯html元素id值
- defaultSeriesType: `pie`,
- //預設圖表型別為餅狀圖
- plotBackgroundColor: `#ffc`,
- //設定圖表區背景色
- plotShadow: true //設定陰影
- },
- title: {
- text: `搜尋引擎統計分析` //圖表標題
- },
- credits: {
- text: `erdangjiade.com`
- },
- tooltip: {
- formatter: function() { //滑鼠滑向影像提示框的格式化提示資訊
- return `<b>` + this.point.name + `</b>: ` + twoDecimal(this.percentage) + ` %`;
- }
- },
- plotOptions: {
- pie: {
- allowPointSelect: true,
- //允許選中,點選選中的扇形區可以分離出來顯示
- cursor: `pointer`,
- //當滑鼠指向扇形區時變為手型(可點選)
- //showInLegend: true, //如果要顯示圖例,可將該項設定為true
- dataLabels: {
- enabled: true,
- //設定資料標籤可見,即顯示每個扇形區對應的資料
- color: `#000000`,
- //資料顯示顏色
- connectorColor: `#999`,
- //設定資料域扇形區的連線線的顏色
- style: {
- fontSize: `12px` //資料顯示的大小
- },
- formatter: function() { //格式化資料
- return `<b>` + this.point.name + `</b>: ` + twoDecimal(this.percentage) + ` %`;
- //return `<b>` + this.point.name + `</b>: ` + this.y ;
- }
- }
- }
- },
- series: [{ //資料列
- name: `search engine`,
- data: data //核心資料列來源於php讀取的資料並解析成JSON
- }]
- });
- });
- 此外,格式化資料市,如果要顯示百分比,可使用this.percentage,Highcharts會自動將整數轉換為百分數,如果要顯示資料量,直接使用this.y。
- 百分比程式碼如下:
- formatter: function() { //格式化資料
- return `<b>` + this.point.name + `</b>: ` + twoDecimal(this.percentage) + ` %`;
- }
- 實際資料是這樣的:
- formatter: function() { //格式化資料
- return `<b>` + this.point.name + `</b>: ` + this.y ;
- }
- 最後我們要保留兩位小數,程式碼貼下:
- function twoDecimal(x) { //保留2位小數
- var f_x = parseFloat(x);
- if (isNaN(f_x)) {
- alert(`錯誤的引數`);
- return false;
- }
- var f_x = Math.round(x * 100) / 100;
- var s_x = f_x.toString();
- var pos_decimal = s_x.indexOf(`.`);
- if (pos_decimal < 0) {
- pos_decimal = s_x.length;
- s_x += `.`;
- }
- while (s_x.length <= pos_decimal + 2) {
- s_x += `0`;
- }
- return s_x;
- }
相關文章
- 用Python生成柱狀圖、折線圖、餅狀圖來統計自己的手機話費Python
- Android 折線圖之hellocharts (餅狀圖)餅圖Android
- SVG繪製餅狀圖SVG
- 自定義餅狀圖(二)
- 自定義餅狀圖(一)
- Canvas(3)---繪製餅狀圖Canvas
- PHP 生成折線圖和餅圖等PHP
- D3.js上手——餅狀圖JS
- 使用 Flutter 繪製圖表(二)餅狀圖?Flutter
- 柱狀圖、直方圖、散點圖、餅圖講解直方圖
- 自定義View合輯(2)-餅狀圖View
- CSS3動態餅狀圖效果CSSS3
- android 自定義帶動畫的統計餅圖Android動畫
- Flutter 112: 圖解自定義 ACEPieWidget 餅狀圖Flutter圖解
- java實現各種資料統計圖(柱形圖,餅圖,折線圖)Java
- Android使用AChartEngine製作曲線、柱狀圖、餅形等圖表Android
- highcharts實現的餅狀圖程式碼例項
- canvas實現的簡單餅狀圖程式碼例項Canvas
- 如何開發一個百分比餅狀圖動畫動畫
- canvas圖表(3) - 餅圖Canvas
- ECharts系列:玩轉ECharts之常用圖(折線、柱狀、餅狀、散點、關係、樹)Echarts
- 在UnityUI中繪製線狀統計圖UnityUI
- javascript柱狀統計圖程式碼例項JavaScript
- 【Python 實戰基礎】如何繪製餅狀圖分析商品庫存Python
- Android開發自定義控制元件實現一個餅狀圖Android控制元件
- 【matplotlib 實戰】--餅圖
- ECharts 餅圖繪製教程Echarts
- Android自定義View,畫一個好看帶延長線的餅狀圖AndroidView
- 柱狀圖和列統計資訊的關係
- Android之自定義控制元件實現天氣溫度折線圖和餅狀圖Android控制元件
- PHP物件程式設計實現3D餅圖 (轉)PHP物件程式設計3D
- Python pyecharts繪製餅圖PythonEcharts
- Qt之自繪製餅圖QT
- 統計分析柱狀圖繪製工具GraphPad Prism 9PHP
- 【iOS】一款非常漂亮的柱狀統計圖框架iOS框架
- 【highcharts應用-雙餅圖】
- echarts間隔餅圖實現方法Echarts
- 微信小程式(JAVAScript)實現餅圖微信小程式JavaScript