Question

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

 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。分隔符取决于PC的本地设置。我知道我可以设置数字格式并摆脱分隔符，但这样我就会失去链接。有人可以建议我如何为模式设置数字格式？

Answer 1

您可以将数字格式与模式格式组合

只需要先使用数字格式

请参阅以下示例中的User Id列

另一个选项将直接在data

中提供数字格式

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

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

＆＃13;

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']
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table-div"></div>

＆＃13;

如何在Google Visualization中组合数字和模式格式化程序？

1 个答案: