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
- echarts 餅圖巢狀 二級餅圖 子餅圖 複合餅圖Echarts巢狀
- Android 折線圖之hellocharts (餅狀圖)餅圖Android
- SVG繪製餅狀圖SVG
- Quart2D 畫圖二 (餅狀圖、柱狀圖)
- Canvas(3)---繪製餅狀圖Canvas
- PHP 生成折線圖和餅圖等PHP
- D3.js上手——餅狀圖JS
- 使用 Flutter 繪製圖表(二)餅狀圖?Flutter
- Flutter 112: 圖解自定義 ACEPieWidget 餅狀圖Flutter圖解
- 柱狀圖、直方圖、散點圖、餅圖講解直方圖
- CSS3動態餅狀圖效果CSSS3
- 自定義View合輯(2)-餅狀圖View
- 微信小程式echarts-餅狀圖微信小程式Echarts
- android 自定義帶動畫的統計餅圖Android動畫
- 餅圖
- 餅圖0625
- python-資料分析-Matplotlib-1-基礎圖形(曲線圖-散點-柱狀-堆疊柱狀-餅狀圖-直方圖)Python直方圖
- hightchart的3d餅狀圖圖例顯示問題記錄3D
- ECharts系列:玩轉ECharts之常用圖(折線、柱狀、餅狀、散點、關係、樹)Echarts
- 在UnityUI中繪製線狀統計圖UnityUI
- 如何開發一個百分比餅狀圖動畫動畫
- 【Python 實戰基礎】如何繪製餅狀圖分析商品庫存Python
- echarts繪製餅圖Echarts
- 【matplotlib 實戰】--餅圖
- Highcharts繪製餅圖
- Android自定義View,畫一個好看帶延長線的餅狀圖AndroidView
- 統計分析柱狀圖繪製工具GraphPad Prism 9PHP
- 【highcharts應用-雙餅圖】
- Python pyecharts繪製餅圖PythonEcharts
- ECharts 餅圖繪製教程Echarts
- 在Report Builder 3.0中生成柱狀圖和折線圖NUUI
- 資料視覺化之matplotlib實戰:plt.pie()函式 繪製餅狀圖視覺化函式
- 用matplotlib散點圖用餅圖示記
- PHP 生成獎狀PHP
- E3 2018衛星統計:去年大餅今如何?
- Android-EasyChart第二波餅圖Android
- echarts間隔餅圖實現方法Echarts