highcharts實現餅狀圖

時間 2021-04-21

標籤 javascript html java web ajax json 服務器 app url spa 欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

  </head>
  <body>
    <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

  </body>
</html>
<script type="text/javascript">
Highcharts.chart('container', {
  chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie'
  },
  title: {
      text: 'Browser market shares in January, 2018'
  },
  tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
      pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
              enabled: true,
              format: '<b>{point.name}</b>: {point.percentage:.1f} %',
              style: {
                  color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
              }
          }
      }
  },
  series: [{
      name: 'Brands',
      colorByPoint: true,
      data: [{
          name: 'Chrome',
          y: 61.41,
          sliced: true,
          selected: true
      }, {
          name: 'Internet Explorer',
          y: 11.84
      }, {
          name: 'Firefox',
          y: 10.85
      }, {
          name: 'Edge',
          y: 4.67
      }, {
          name: 'Safari',
          y: 4.18
      }, {
          name: 'Sogou Explorer',
          y: 1.64
      }, {
          name: 'Opera',
          y: 1.6
      }, {
          name: 'QQ',
          y: 1.2
      }, {
          name: 'Other',
          y: 2.61
      }]
  }]
});

</script>

這裏餅狀圖是用highcharts實現的。 javascript

在頭文件中加入：html

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: auto"></div>

在最後添加js代碼，這部分是主要代碼。要實現按照用戶的得到途徑佔比來製做一個餅狀圖，須要知道各個途徑approach下分別有多少個用戶。要實現這個目的，必需要從服務器端獲取數據。web

js經過ajax獲取服務器端數據

ajax的樣子大概是：ajax

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

必需要先有一個url，首先已經有了一個get 'backend',to: "backend/base#index"，因此考慮這個，可是當在index action中用render返回數據的時候，數據是返回了，原來的頁面也沒有了，因此還須要另外作一個url。json

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來存放返回的dataapp

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

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

讓服務器去抓取數據，看每一個approach下各有多少筆數據：url

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，這樣就能夠了。spa

<script type="text/javascript">
$.ajax({
  url: "/backend/pie",
  method: 'GET',
  dataType: 'json',
  success: function(data){
    window.ser_data=data
    pie();
  }
});
function pie(){
  Highcharts.chart('container', {

    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: '客戶來源佔比圖'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },

    series: [{
        name: 'Brands',
        colorByPoint: true,

        data: [{
            name: '官網',
            y: ser_data["website"],
            sliced: true,
            selected: true
        }, {
            name: '客戶推薦',
            y: ser_data["referrence"]
        }, {
            name: 'relocation suppliers',
            y: ser_data["relocation"]
        }, {
            name: '高校/外企人事部',
            y: ser_data["hr"]
        }, {
            name: '廣告',
            y: ser_data["ad"]
        }, {
            name: '其它',
            y: ser_data["others"]
        }]
    }]
  });
}
</script>