highcharts實現餅狀圖

BlackFlagBin 發布于2019-08-22 15:51 / 3528人閱讀

摘要：這里餅狀圖是用實現的。要實現按照用戶的獲得途徑占比來制作一個餅狀圖，需要知道各個途徑下分別有多少個用戶。要實現這個目的，必須要從服務器端獲取數據。客戶來源占比圖官網客戶推薦高校外企人事部廣告其它

這里餅狀圖是用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餅狀圖餅狀圖代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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