2

我关注arrayToDataTable的谷歌图表文档，示例说明我可以使用格式化值，如下所示：

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'}], 
...

但图表甚至没有显示，崩溃。如果我取出格式化的数据，它会完美运行。我做错了什么？如何使用更好看的版本来显示图表上的值？

4

2 回答 2

4

正如 Andrew 在评论中提到的那样，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'}],
]);

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

于 2013-02-12T02:53:34.940 回答
1

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

有了这个，您仍然不能使用数组对象中的格式化模式来使用 arrayToDataTable 方法来实例化表，但是您可以只包含值然后使用列上的 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

我应该提醒一下，这种技术实际上不适用于上述原始用例，因为没有为每一行寻求一致的格式。

于 2016-10-25T21:56:08.057 回答