百分比長條圖

將百分比值顯示為長條圖

作者：Drijkoningen Dirk
需求：DataTables 1.10+

此資料渲染輔助方法會將百分比值轉換為長條圖。數值可以有或沒有 % 符號，小數點會四捨五入到給定的值。百分比的最大值為 100%。

此函數應與 DataTables 的 columns.render 設定選項一起使用。

v1.1 更新日誌 - 新增了第七個邊框類型參數。 - 所有參數現在都是可選的。 - 改進了樣式。 - Bug 修復：文字現在總是居中。

它接受七個參數

string 預設為 square（方形），或 round（圓形）用於圓角長條圖。
string 文字的十六進位顏色。
string 邊框的十六進位顏色。
string 長條圖的十六進位顏色。
string 背景的十六進位顏色。
integer 用於四捨五入數值。
string 邊框樣式，預設值 = ridge (solid, outset, groove, ridge)

DEMO : http://codepen.io/RedJokingInn/pen/jrkZQN

使用

此外掛程式可以透過多種不同的方式取得和使用。

瀏覽器

此外掛程式可在 DataTables CDN 上取得

然後，該外掛程式將自動註冊到全域 DataTables 實例。如果您正在使用 AMD 加載器（例如 Require.js），也可以使用此檔案。

請注意，如果您正在使用多個外掛程式，將外掛程式合併到單個檔案並將其託管在您自己的伺服器上，而不是向 DataTables CDN 發出多個請求，在效能方面可能會有所助益。

NPM

這些外掛程式都可以在 NPM 上找到（也可以與 Yarn 或任何其他 Javascript 套件管理器一起使用），作為 datatables.net-plugins 套件的一部分。若要使用此外掛程式，請先安裝外掛程式套件

npm install datatables.net-plugins

ES 模組

然後，如果您正在使用 ES 模組，請匯入 datatables.net，您需要的任何其他 DataTables 擴充功能以及此外掛程式

import DataTable from 'datatables.net';
import 'datatables.net-plugins/dataRender/percentageBars.mjs';

CommonJS

如果您正在使用 Node 的 CommonJS 加載器（例如，使用舊版本的 Webpack 或非模組化的 Node 程式碼），請使用以下方法來 require 外掛程式

var $ = require('jquery');
var DataTable = require('datatables.net');
require('datatables.net-plugins/dataRender/percentageBars.js');

範例

// Display rounded bars with white text, medium blue border, light blue bar, dark blue background, rounded to one decimal.
  $('#example').DataTable( {
    columnDefs: [ {
      targets: 4,
      render: DataTable.render.percentBar( 'round','#FFF', '#269ABC', '#31B0D5', '#286090', 1, 'groove' )
    } ]
  } );

// All default values used. Square bars with black text, gray ridged border, light green bar, light gray background, rounded to integer.
  $('#example').DataTable( {
    columnDefs: [ {
      targets: 2,
      render: DataTable.render.percentBar()
    } ]
  } );

版本控制

如果您對如何改進此外掛程式有任何想法，或發現任何錯誤，它可以在 GitHub 上取得，並且非常歡迎發出 pull request！

此外掛程式：percentageBars.js
完整的 DataTables 外掛程式儲存庫：DataTables/Plugins