Question

我有一个Google可视化表，我想做两件事。

如果单元格是正数或负数，则格式化单元格。第二个是在表格的最后一行上方绘制边框，或使当前边框变粗。

对于正值和负值，我找到了解决方案，但并没有达到我想要的。在我的fiddle中，我将google示例用于了colorformat。

var formatter = new google.visualization.ColorFormat();
formatter.addRange(null, 0, 'white', 'orange');
formatter.addRange(0, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column
formatter.format(data, 2); // Apply formatter to third column
formatter.format(data, 3); // Apply formatter to fourth column

这几乎是我想要的，但是我想将文本居中并且字体以粗体显示，不确定是否可以使用格式化程序来做到这一点？

因此，在我的小提琴中，您还将看到注释掉css的另一种尝试。下面是一行的示例。但是，当我运行此表时，该表在每个单元格中都显示了[object Object]，不知道为什么吗？

data.setCell(0,0,'France', {'className': 'left-text'});
data.setCell(0,1, 325, {'className': 'positive-value'});
data.setCell(0,2, 450, {'className': 'positive-value'});
data.setCell(0,3, 700, {'className': 'positive-value'});

Answer 1

1）至于格式化程序，您是正确的，它只会更改颜色

2）关于在每个单元格上设置类名，您对setCell的调用缺少一个参数

setCell(rowIndex, columnIndex, value, formattedValue, properties)

您要将对象传递给formattedValue参数，该参数应该是字符串

为了设置properties参数，您还需要添加formattedValue参数...

data.setCell(0,0,'France','France', {'className': 'left-text'});
data.setCell(0,1, 325, '325', {'className': 'positive-value'});
data.setCell(0,2, 450, '450', {'className': 'positive-value'});
data.setCell(0,3, 700, '700', {'className': 'positive-value'});

您还可以执行以下操作...

data.addRow([{v: 'France', p: {'className': 'left-text'}}, {v: 325, p: {'className': 'positive-value'}}, {v: 450, p: {'className': 'positive-value'}}, {v: 700, p: {'className': 'positive-value'}}]);

3）参见以下工作片段...

google.charts.load('current', {
  packages: ['controls', 'corechart', 'table']
}).then(function () {
  DrawPerfContrTable();
});

// portfolio contribution figures
function DrawPerfContrTable() {
  var data = new google.visualization.DataTable();
  var options = {
    title: 'PnL',
    showRowNumber: false,
    width: '50%',
    height: '75%',
    allowHtml: true
  };

  data.addColumn('string', '');
  data.addColumn('number', 'MTD');
  data.addColumn('number', 'QTD');
  data.addColumn('number', 'YTD');
  data.addRows(1);

  data.setCell(0,0,'France','France', {'className': 'left-text'});
  data.setCell(0,1, 325, '325', {'className': 'positive-value'});
  data.setCell(0,2, 450, '450', {'className': 'positive-value'});
  data.setCell(0,3, 700, '700', {'className': 'positive-value'});

  data.addRow([{v: 'France', p: {'className': 'left-text'}}, {v: 325, p: {'className': 'positive-value'}}, {v: 450, p: {'className': 'positive-value'}}, {v: 700, p: {'className': 'positive-value'}}]);

  var table = new google.visualization.Table(document.getElementById('tblExample'));
  table.draw(data, options);
}

.right-text {
    text-align: right;
  }

.left-text {
    text-align: left;
  }

.positive-value {
    font-weight: bold;
    color: green;
    background-color: green;
    text-align: center;
  }
  
.negative-value {
    font-weight: bold;
    color: red;
    background-color: red;
    text-align: center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="tblExample">

</div>

google可视化表根据数值更改单元格值

1 个答案: