基于数值的google可视化表格更改单元格值
基于数值的google可视化表格更改单元格值
提问于 2018-07-31 08:28:55
我有一个谷歌可视化表，我想做两件事。
基于if单元格是正数或负数的if格式单元格。第二步是在表的最后一行上画一个边框，或者使当前边框变厚。
对于正值和负值，我找到了一个解决方案，但不完全是我想要的。在我的小提琴中，我使用了google的例子作为颜色格式。
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对象，不确定原因是什么？
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'});回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-31 14:47:13
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51608815
复制相关文章
相似问题
腾讯云开发者
