百分比条形图

将百分比值以条形图显示

• 作者：Drijkoningen Dirk
• 需要：DataTables 1.10+

此数据呈现辅助方法将百分比值转换成条形图。值可以包含 “%” 符号，也可以不包含，小数会四舍五入至指定值。百分比值的最大值为 100%。

此函数应与 DataTables 的columns.render 配置选项结合使用。

v1.1 变更日志 - 添加了第七个边框类型参数。- 所有参数现为可选项。- 优化了样式。- 错误修复：文本现在始终居中。

它接受七个参数

1. string 正方形作为默认值，圆形作为圆形条形图。
2. string 文本的十六进制颜色。
3. string 边框的十六进制颜色。
4. string 条形图的十六进制颜色。
5. string 背景的十六进制颜色。
6. integer 用于四舍五入值的数字。
7. string 边框样式，默认值为 ridge（solid、outset、groove、ridge）

演示：http://codepen.io/RedJokingInn/pen/jrkZQN

使用

此插件可通过多种不同方式获取和使用。

浏览器

此插件可在 DataTables CDN 中获取

然后，插件会自动将自身注册到全局 DataTables 实例中。如果你使用 Require.js 等 AMD 加载程序，也可以使用此文件。

请注意，如果你正在使用多个插件，将插件合并到一个文件中并在你自己的服务器上托管，而不是向 DataTables CDN 发出多个请求，则可能有益于提高性能。

NPM

所有插件都在 datatables.net-plugins 软件包中以 NPM 的形式提供（也可以与 Yarn 或任何其他 Javascript 包管理器搭配使用）。要使用此插件，首先安装插件包

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 上查看，欢迎提交拉取请求！

• 此插件：percentageBars.js
• 完整的数据表插件仓库：DataTables/Plugins