Google Chart arrayToDataTable formatted value not working

问题

I am followinf the google Chart documentation for arrayToDataTable and the example states that I can use formatted values, like that:

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

where f:'18,500 is the formatted value to show. My code looks identical:

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

but the chart does not even shows, crashing. If I take out the formatted data, it works perfectly. What I am doing wrong? How can I use a better looking version to show the values on the chart?

回答1:

As mentioned in the comments by Andrew, Google Docs seem to lie on this one.

ArrayToDataTable() works great if you're passing in an array. Since adding the additional formatting creates an array in an array, Google doesn't seem to like it. If you want to use formats, you should add the data manually as follows.

Your Code:

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

Updated Code:

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

This won't overly complicate your data adding, will end with the same result, and will play nicer with formatted values.

回答2:

I also ran into this problem, but wasn't satisfied with manually adding my data. After much digging I discovered the "PatternFormat" method: https://developers.google.com/chart/interactive/docs/reference#patternformatter

With this you still can't use the formatting pattern in your array object to instantiate the table with the arrayToDataTable method, but you can include just the values & then use the PatternFormat method on the column to revise to the desired output.

So something like:

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

I should caveat that this technique will actually not work perfectly for the above original use case since there is not a consistent format sought for each row.

来源：https://stackoverflow.com/questions/14818429/google-chart-arraytodatatable-formatted-value-not-working

标签

charts

formatting

google-visualization