Rumah hujung hadapan web tutorial js PHP mysql Highcharts menjana pai chart_jquery

PHP mysql Highcharts menjana pai chart_jquery

May 16, 2016 pm 04:01 PM
highcharts php carta pai

Mysql

Mula-mula kami mencipta jadual chart_pie sebagai data statistik.

-- 
-- 表的结构 `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);
Salin selepas log masuk

PHP

Dalam pie.php kita perlu menjana data untuk panggilan hadapan:

$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: 'jb51.net' 
  }, 
  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 
  }] 
 }); 
});
Salin selepas log masuk

Selain itu, semasa memformat data, jika anda ingin memaparkan peratusan, anda boleh menggunakan this.percentage secara automatik akan menukar integer kepada peratusan Jika anda ingin memaparkan jumlah data, gunakan this.y secara langsung.
Kod peratusan adalah seperti berikut:

formatter: function() { //格式化数据 
 return '<b>' + this.point.name + '</b>: ' + twoDecimal(this.percentage) + ' %'; 
}
Salin selepas log masuk

Data sebenar adalah seperti ini:

formatter: function() { //格式化数据 
 return '<b>' + this.point.name + '</b>: ' + this.y ; 
}
Salin selepas log masuk

Akhir sekali kita perlu mengekalkan dua tempat perpuluhan, kod disiarkan di bawah:

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; 
}
Salin selepas log masuk

Carta bar, carta pai, carta lengkung, dll. semuanya sama.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tarikh dan Masa CakePHP Tarikh dan Masa CakePHP Sep 10, 2024 pm 05:27 PM

Tarikh dan Masa CakePHP

Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Dec 24, 2024 pm 04:42 PM

Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian

Muat naik Fail CakePHP Muat naik Fail CakePHP Sep 10, 2024 pm 05:27 PM

Muat naik Fail CakePHP

Penghalaan CakePHP Penghalaan CakePHP Sep 10, 2024 pm 05:25 PM

Penghalaan CakePHP

Bincangkan CakePHP Bincangkan CakePHP Sep 10, 2024 pm 05:28 PM

Bincangkan CakePHP

Konfigurasi Projek CakePHP Konfigurasi Projek CakePHP Sep 10, 2024 pm 05:25 PM

Konfigurasi Projek CakePHP

Panduan Ringkas CakePHP Panduan Ringkas CakePHP Sep 10, 2024 pm 05:27 PM

Panduan Ringkas CakePHP

Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Dec 20, 2024 am 11:31 AM

Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP

See all articles