Question

我正在关注arrayToDataTable的Google图表文档，示例说明我可以使用格式化的值，例如：

var data = google.visualization.arrayToDataTable([
['Employee Name', 'Salary'],
['Mike', {v:22500, f:'18,500'}],
...

其中 f：'18,500 是要显示的格式化值。我的代码看起来很相似：

var data = google.visualization.arrayToDataTable([
['Category', 'Amount'],
['Food', {v:5595.819984, f:'5.595,82'}], 
['Home', {v:1890.530002, f:'1.890,53'}], 
['Mail', {v:8.380000, f:'8,38'}], 
['Train', {v:564.899998, f:'564,90'}], 
['Photo', {v:959.119995, f:'959,12'}], 
['Lego', {v:428.760004, f:'428,76'}], 
...

但图表甚至没有显示，崩溃。如果我取出格式化的数据，它可以很好地工作。我做错了什么？如何使用更好看的版本来显示图表上的值？

Answer 1

如安德鲁的评论所述，Google Docs似乎就在这个问题上。

如果您传入数组，

ArrayToDataTable()效果很好。由于添加其他格式会在数组中创建数组，因此Google似乎不喜欢它。如果要使用格式，则应手动添加数据，如下所示。

您的代码：

var data = google.visualization.arrayToDataTable([
['Category', 'Amount'],
['Food', {v:5595.819984, f:'5.595,82'}], 
['Home', {v:1890.530002, f:'1.890,53'}], 
['Mail', {v:8.380000, f:'8,38'}], 
['Train', {v:564.899998, f:'564,90'}], 
['Photo', {v:959.119995, f:'959,12'}], 
['Lego', {v:428.760004, f:'428,76'}],

更新代码：

var data = google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Amount');
data.addRows([
['Food', {v:5595.819984, f:'5.595,82'}], 
['Home', {v:1890.530002, f:'1.890,53'}], 
['Mail', {v:8.380000, f:'8,38'}], 
['Train', {v:564.899998, f:'564,90'}], 
['Photo', {v:959.119995, f:'959,12'}], 
['Lego', {v:428.760004, f:'428,76'}],
]);

这不会使您的数据添加过于复杂，将以相同的结果结束，并且将使用格式化值更好。

Answer 2

我也遇到了这个问题，但对手动添加数据并不满意。经过多次挖掘后，我发现了“PatternFormat”方法： https://developers.google.com/chart/interactive/docs/reference#patternformatter

使用此方法，您仍然无法使用数组对象中的格式设置模式来使用arrayToDataTable方法实例化表，但是您可以仅包含值＆amp;然后使用列上的PatternFormat方法修改所需的输出。

类似于：

var data = google.visualization.arrayToDataTable([
 ['Category', 'Amount'],
 ['Food', 5595.819984], 
 ['Home', 1890.530002], 
 ['Mail', 8.380000], 
 ['Train', 564.899998], 
 ['Photo', 959.119995}], 
 ['Lego', 428.760004}]
], false); //must specify 'false' to indicate first set is column header data

var formatter = new google.visualization.NumberFormat(
{pattern:'####.##'}
);

formatter.format(data, 1); // Apply formatter to second column

我应该警告，这种技术实际上对于上述原始用例实际上并不完美，因为没有为每一行寻找一致的格式。

Google Chart arrayToDataTable格式化值无法正常工作

2 个答案: