Question

我正在尝试将Google图表表格中的单元格格式化为百分比字段。

对于适用于的列：

var flow_format2 = new google.visualization.NumberFormat( {suffix: '%', negativeColor: 'red', negativeParens: true, fractionDigits: 0} );

但据我所知，不可能有一行，因此我想在单元级别上进行 - 这可能吗？

与setProperty是否我需要这样做以及格式化语法是什么。

Answer 1

您可以使用NumberFormat的formatValue方法获取格式化的字符串
而不是应用于整个列

然后您可以在DataTable单元格上手动setFormattedValue 要更改颜色，请使用setProperty更改单元格的'style'属性之后必须绘制图表

- 或 -

当图表的'ready'事件触发时，您可以使用DOM更改单元格值 Table图表生成一组普通的html <table>标记

以下是一个工作片段，展示了两种方法......

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'Name', type: 'string'},
        {label: 'Amount', type: 'number'},
      ],
      rows: [
        {c:[{v: 'Adam'}, {v: -1201}]},
        {c:[{v: 'Mike'}, {v: 2235}]},
        {c:[{v: 'Stephen'}, {v: -5222}]},
        {c:[{v: 'Victor'}, {v: 1288}]},
        {c:[{v: 'Wes'}, {v: -6753}]}
      ]
    });

    var container = document.getElementById('chart_div');
    var tableChart = new google.visualization.Table(container);

    var patternFormat = {
      suffix: '%',
      negativeColor: '#FF0000',
      negativeParens: true,
      fractionDigits: 0
    };

    // create the formatter
    var formatter = new google.visualization.NumberFormat(patternFormat);

    // format cell - first row
    dataTable.setFormattedValue(0, 1, formatter.formatValue(dataTable.getValue(0, 1)));
    if (dataTable.getValue(0, 1) < 0) {
      dataTable.setProperty(0, 1, 'style', 'color: ' + patternFormat.negativeColor + ';');
    }

    google.visualization.events.addOneTimeListener(tableChart, 'ready', function () {

      // format cell via DOM - third row
      var tableCell = container.getElementsByTagName('TR')[3].cells[1];
      tableCell.innerHTML = formatter.formatValue(dataTable.getValue(2, 1));
      if (dataTable.getValue(2, 1) < 0) {
        tableCell.style.color = patternFormat.negativeColor;
      }

    });

    tableChart.draw(dataTable, {
      allowHtml: true
    });
  },
  packages: ['table']
});

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

Google图表格格式化单元格为百分比

1 个答案: