如何在谷歌可视化中组合数字和模式格式化程序

How to combine number and pattern formatters in Google Visualization?

本文关键字：数字 模式 格式化 程序 组合 谷歌 可视化      更新时间：2023-09-26

我有一种在表中显示链接的模式格式：

 var options = { allowHtml: true,
    cssClassNames: someClass,
    width: 10,
    height: 10
 };
 var patterFormat = '<a href="http://somelink/{0}">{0}</a>';
 var formatter = new google.visualization.PatternFormat(patterFormat);
 formatter.format(tableData, [0, 0]); 
 table.draw(tableData, options);

{0}只是ID（例如12345）。

由于某种原因，最近这段代码的结果发生了变化（可能是一些更新），现在我得到了一个带有十进制分隔符的HTML页面ID，例如<a href="http://somelink/12,345">12,345</a>，而不仅仅是12345。分隔符的类型取决于电脑的本地设置。我知道我可以设置数字格式并去掉分隔符，但这样我就会失去链接。有人能建议我如何设置图案的数字格式吗？

您可以将数字格式与图案格式相结合

只需要先使用数字格式

参见以下示例中的User Id列

另一个选项是直接在data 中提供数字格式

数据表中的每个单元格都可以有一个值（v:）和一个格式化值（f:）

对于Customer Id列，提供了格式化的值，因此只需要使用Pattern Format

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      cols: [
        {label: 'Start Date', type: 'date'},
        {label: 'User Id', type: 'number'},
        {label: 'Customer Id', type: 'number'},
        {label: 'Amount', type: 'number'}
      ],
      rows: [
        {c:[{v: new Date('2016, 01, 01')}, {v: 44836}, {v: 067205, f: '067205'}, {v: 1122}]},
        {c:[{v: new Date('2016, 01, 01')}, {v: 86495}, {v: 067205, f: '067205'}, {v: 332}]},
        {c:[{v: new Date('2016, 01, 01')}, {v: 44836}, {v: 228626, f: '228626'}, {v: 0}]},
        {c:[{v: new Date('2016, 01, 01')}, {v: 86495}, {v: 228626, f: '228626'}, {v: 334}]},
        {c:[{v: new Date('2016, 02, 01')}, {v: 44836}, {v: 067205, f: '067205'}, {v: 554}]},
        {c:[{v: new Date('2016, 02, 01')}, {v: 86495}, {v: 067205, f: '067205'}, {v: 0}]},
        {c:[{v: new Date('2016, 02, 01')}, {v: 44836}, {v: 228626, f: '228626'}, {v: 0}]},
        {c:[{v: new Date('2016, 02, 01')}, {v: 86495}, {v: 228626, f: '228626'}, {v: 544}]},
      ]
    });
    // format User Id number first
    var numberFormat = new google.visualization.NumberFormat({
      pattern: '0'
    });
    numberFormat.format(data, 1);
    // format User Id pattern
    var formatter = new google.visualization.PatternFormat(
      '<a href="http://somelink/{1}">{0}</a>'
    );
    formatter.format(data, [0, 1], 1);
    // format Customer Id pattern
    formatter = new google.visualization.PatternFormat(
      '<a href="http://somelink/{1}">{0}</a>'
    );
    formatter.format(data, [0, 2], 2);
    new google.visualization.ChartWrapper({
      chartType: 'Table',
      containerId: 'table-div',
      dataTable: data,
      options: {
        allowHtml: true
      },
      view: {'columns': [1, 2, 3]}
    }).draw();
  },
  packages: ['corechart', 'table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table-div"></div>

相关文章：