highcharts實現(xiàn)餅狀圖

BlackFlagBin 發(fā)布于2019-08-22 15:51 / 3533人閱讀

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

這里餅狀圖是用highcharts實現(xiàn)的。

在頭文件中加入：

在放圖的位置添加html代碼：

在最后添加js代碼，這部分是主要代碼。要實現(xiàn)按照用戶的獲得途徑占比來制作一個餅狀圖，需要知道各個途徑approach下分別有多少個用戶。要實現(xiàn)這個目的，必須要從服務器端獲取數(shù)據(jù)。

js通過ajax獲取服務器端數(shù)據(jù)

ajax的樣子大概是：

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

必須要先有一個url，首先已經(jīng)有了一個get "backend",to: "backend/base#index"，所以考慮這個，但是當在index action中用render返回數(shù)據(jù)的時候，數(shù)據(jù)是返回了，原來的頁面也沒有了，所以還需要另外做一個url。

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

在base_controller.rb中添加了個pie action

class Backend::BaseController < ApplicationController
    def pie 
    end
end

所以url就有了，讓服務器返回json數(shù)據(jù)，并且建立一個全局變量ser_data來存放返回的data

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

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

讓服務器去抓取數(shù)據(jù)，看每個approach下各有多少筆數(shù)據(jù)：

  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

這樣做之后發(fā)現(xiàn)仍有問題，全局變量似乎不起作用，沒有顯示餅狀圖出來，后來發(fā)現(xiàn)在js中，ajax比Highcharts.chart()更晚執(zhí)行，所以ser_data的值是空的，于是把Highcharts.chart()放在一個function里，ajax成功回調(diào)的時候在執(zhí)行這個function，這樣就可以了。

GPU云服務器云服務器 js中餅狀圖的實現(xiàn) 餅狀圖 mpandroidchart餅狀圖餅狀圖代碼

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93810.html

echarts 與 highcharts

摘要：渲染能力采用渲染除了對使用，一般來說，更適合繪制圖形元素數(shù)量非常大這一般是由數(shù)據(jù)量大導致的圖表如熱力圖地理坐標系或平行坐標系上的大規(guī)模線圖或散點圖等，也利于實現(xiàn)某些視覺特效如交通圖。一．簡介 echartsecharts是百度公司前端開發(fā)的一個圖表庫，2013年發(fā)布第一版，主要采用canvas畫圖，目前版本3.8.4；完全免費； highcharthighcharts是國外的一家公司...

王笑朝 2019-08-22 17:35 評論0 收藏0
Highcharts+PHP+Mysql生成餅狀統(tǒng)計圖

摘要：演示下載地址效果圖首先我們建一張表作為統(tǒng)計數(shù)據(jù)。百分比代碼如下格式化數(shù)據(jù)實際數(shù)據(jù)是這樣的格式化數(shù)據(jù)最后我們要保留兩位小數(shù)，代碼貼下保留位小數(shù)錯誤的參數(shù) 演示下載地址：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生成餅狀統(tǒng)計圖

摘要：演示下載地址效果圖首先我們建一張表作為統(tǒng)計數(shù)據(jù)。百分比代碼如下格式化數(shù)據(jù)實際數(shù)據(jù)是這樣的格式化數(shù)據(jù)最后我們要保留兩位小數(shù)，代碼貼下保留位小數(shù)錯誤的參數(shù) 演示下載地址：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生成餅狀統(tǒng)計圖

摘要：演示下載地址效果圖首先我們建一張表作為統(tǒng)計數(shù)據(jù)。百分比代碼如下格式化數(shù)據(jù)實際數(shù)據(jù)是這樣的格式化數(shù)據(jù)最后我們要保留兩位小數(shù)，代碼貼下保留位小數(shù)錯誤的參數(shù) 演示下載地址：http://www.erdangjiade.com/js...效果圖：showImg(https://segmentfault.com/img/bVKSyF?w=681&h=403); Mysql 首先我們建一張...

xiaokai 2019-08-01 16:33 評論0 收藏0
數(shù)據(jù)可視化實踐

摘要：但如果數(shù)據(jù)可視化做的較弱，反而會帶來負面效果錯誤的表達往往會損害數(shù)據(jù)的傳播，完全曲解和誤導用戶，所以更需要我們多維的展現(xiàn)數(shù)據(jù)，就不僅僅是單一層面，目前有多種第三方庫來實現(xiàn)數(shù)據(jù)的可視化等。數(shù)據(jù)可視化的具體實現(xiàn)這里基于兩種實現(xiàn)方式，一種一種。數(shù)據(jù)可視化的目的其實就是直觀地展現(xiàn)數(shù)據(jù)，例如讓花費數(shù)小時甚至更久才能歸納的數(shù)據(jù)量，轉(zhuǎn)化成一眼就能讀懂的指標；通過加減乘除、各類公式權衡計算得到的兩組...

PrototypeZ 2019-08-23 13:40 評論0 收藏0