Highcharts简单实现异步加载数据饼状图

1. 官方Demo的饼状图源码:

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
       plotBackgroundColor: null,
       plotBorderWidth: null,
       plotShadow: false
   };
   var title = {
      text: '2014 年各浏览器市场占有比例'   
   };      
   var tooltip = {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
   };
   var plotOptions = {
      pie: {
         allowPointSelect: tru
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以通过以下步骤从数据库获取数据实现异步刷新显示: 1. 首先,确保你已经安装了FastAdmin和相关依赖。可以使用Composer来安装FastAdmin和必要的扩展。 2. 创建一个数据库表,用于存储数据。表结构可以包含字段如下: - id:数据的唯一标识 - label:数据项的标签 - value:数据项的值 3. 在FastAdmin中创建一个控制器,用于处理异步请求并获取数据库中的数据。你可以在控制器中使用Model来查询数据库并获取数据。例如,使用ThinkPHP框架的话,可以这样写: ```php use think\Controller; use app\admin\model\PieData; class PieController extends Controller { public function getData() { $data = PieData::select(); return json($data); } } ``` 4. 在前端页面中使用Ajax来发送异步请求并获取数据。你可以在页面中使用JavaScript来实现这个功能。例如,使用jQuery的话,可以这样写: ```javascript $.ajax({ url: '/admin/pie/getData', type: 'GET', dataType: 'json', success: function(data) { // 在这里使用返回的数据来绘制 // 例如使用Chart.js等表库 } }); ``` 5. 在页面中使用表库来绘制。你可以选择使用一些流行的JavaScript表库,如Chart.js、Highcharts等。根据你选择的库,按照其文档提供的方法来绘制,并将异步获取到的数据传递给表库进行展示。 这样,你就可以通过以上步骤从数据库获取数据实现异步刷新显示了。记得在控制器中处理数据查询和前端页面中处理异步请求和绘制表的逻辑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值