highcharts实现饼状图

BlackFlagBin 发布于2019-08-22 15:51 / 3530人阅读

摘要：这里饼状图是用实现的。要实现按照用户的获得途径占比来制作一个饼状图，需要知道各个途径下分别有多少个用户。要实现这个目的，必须要从服务器端获取数据。客户来源占比图官网客户推荐高校外企人事部广告其它

这里饼状图是用highcharts实现的。

在头文件中加入：

在放图的位置添加html代码：

在最后添加js代码，这部分是主要代码。要实现按照用户的获得途径占比来制作一个饼状图，需要知道各个途径approach下分别有多少个用户。要实现这个目的，必须要从服务器端获取数据。

js通过ajax获取服务器端数据

ajax的样子大概是：

$.ajax({
    url:  
    method: 
    dataType:  
    success: function(data){
        
    }
})

必须要先有一个url，首先已经有了一个get "backend",to: "backend/base#index"，所以考虑这个，但是当在index action中用render返回数据的时候，数据是返回了，原来的页面也没有了，所以还需要另外做一个url。

get "backend/pie"=>"backend/base#pie",:as=>:pie

在base_controller.rb中添加了个pie action

class Backend::BaseController < ApplicationController
    def pie 
    end
end

所以url就有了，让服务器返回json数据，并且建立一个全局变量ser_data来存放返回的data

$.ajax({
  url: "/backend/pie",
  method: "GET",
  dataType: "json",
  success: function(data){
    window.ser_data=data
  }
});

  Highcharts.chart("container", {
  ...
  
)}

让服务器去抓取数据，看每个approach下各有多少笔数据：

  def pie
    website_num=Guest.where("approach=?","0").count
    refer_num=Guest.where("approach=?","1").count
    relocation_num=Guest.where("approach=?","2").count
    hr_num=Guest.where("approach=?","3").count
    ad_num=Guest.where("approach=?","4").count
    others_num=Guest.where("approach=?","5").count
    render :json=>{
      :website=>website_num,
      :referrence=>refer_num,
      :relocation=>relocation_num,
      :hr=>hr_num,
      :ad=>ad_num,
      :others=>others_num}
  end

这样做之后发现仍有问题，全局变量似乎不起作用，没有显示饼状图出来，后来发现在js中，ajax比Highcharts.chart()更晚执行，所以ser_data的值是空的，于是把Highcharts.chart()放在一个function里，ajax成功回调的时候在执行这个function，这样就可以了。

GPU云服务器云服务器 js中饼状图的实现饼状图 mpandroidchart饼状图饼状图代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93810.html

echarts 与 highcharts

摘要：渲染能力采用渲染除了对使用，一般来说，更适合绘制图形元素数量非常大这一般是由数据量大导致的图表如热力图地理坐标系或平行坐标系上的大规模线图或散点图等，也利于实现某些视觉特效如交通图。一．简介 echartsecharts是百度公司前端开发的一个图表库，2013年发布第一版，主要采用canvas画图，目前版本3.8.4；完全免费； highcharthighcharts是国外的一家公司...

王笑朝 2019-08-22 17:35 评论0 收藏0
Highcharts+PHP+Mysql生成饼状统计图

摘要：演示下载地址效果图首先我们建一张表作为统计数据。百分比代码如下格式化数据实际数据是这样的格式化数据最后我们要保留两位小数，代码贴下保留位小数错误的参数演示下载地址：http://www.erdangjiade.com/js...效果图：showImg(https://segmentfault.com/img/bVKSyF?w=681&h=403); Mysql 首先我们建一张...

ninefive 2019-06-27 15:48 评论0 收藏0
Highcharts+PHP+Mysql生成饼状统计图

摘要：演示下载地址效果图首先我们建一张表作为统计数据。百分比代码如下格式化数据实际数据是这样的格式化数据最后我们要保留两位小数，代码贴下保留位小数错误的参数演示下载地址：http://www.erdangjiade.com/js...效果图：showImg(https://segmentfault.com/img/bVKSyF?w=681&h=403); Mysql 首先我们建一张...

cocopeak 2019-08-20 15:14 评论0 收藏0
Highcharts+PHP+Mysql生成饼状统计图

摘要：演示下载地址效果图首先我们建一张表作为统计数据。百分比代码如下格式化数据实际数据是这样的格式化数据最后我们要保留两位小数，代码贴下保留位小数错误的参数演示下载地址：http://www.erdangjiade.com/js...效果图：showImg(https://segmentfault.com/img/bVKSyF?w=681&h=403); Mysql 首先我们建一张...

xiaokai 2019-08-01 16:33 评论0 收藏0
数据可视化实践

摘要：但如果数据可视化做的较弱，反而会带来负面效果错误的表达往往会损害数据的传播，完全曲解和误导用户，所以更需要我们多维的展现数据，就不仅仅是单一层面，目前有多种第三方库来实现数据的可视化等。数据可视化的具体实现这里基于两种实现方式，一种一种。数据可视化的目的其实就是直观地展现数据，例如让花费数小时甚至更久才能归纳的数据量，转化成一眼就能读懂的指标；通过加减乘除、各类公式权衡计算得到的两组...

PrototypeZ 2019-08-23 13:40 评论0 收藏0