highcharts实现饼状图



  
    
    
    
    

  
  
    

这里饼状图是用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,这样就可以了。


你可能感兴趣的:(javascript,ruby)