javascript - Google charts display Money not Percentages - Stack Overflow

admin管理员组

文章数量:1254577

Given the data for a pie chart:

data = new google.visualization.arrayToDataTable([
    ['Sales', 'Revenue Distribution'],
    ['Author', 5],
    ['Company', 2],
    ['Tax', 0.4],
    ['Payment Processors', 0.9]
]);
drawChart();

How can I make it display as dollar amounts? Either in the tooltip or on the actual graph itself (both would be preferable!)

For example, ideally this would work:

data = new google.visualization.arrayToDataTable([
    ['Sales', 'Revenue Distribution'],
    ['Author', '$5'],
    ['Company', '$2'],
    ['Tax', '$0.4'],
    ['Payment Processors', '$0.9']
]);
drawChart();

Given the data for a pie chart:

data = new google.visualization.arrayToDataTable([
    ['Sales', 'Revenue Distribution'],
    ['Author', 5],
    ['Company', 2],
    ['Tax', 0.4],
    ['Payment Processors', 0.9]
]);
drawChart();

How can I make it display as dollar amounts? Either in the tooltip or on the actual graph itself (both would be preferable!)

For example, ideally this would work:

data = new google.visualization.arrayToDataTable([
    ['Sales', 'Revenue Distribution'],
    ['Author', '$5'],
    ['Company', '$2'],
    ['Tax', '$0.4'],
    ['Payment Processors', '$0.9']
]);
drawChart();

• javascript
• formatting
• google-visualization

Share Improve this question Follow asked May 21, 2012 at 15:34 Tom GullenTom Gullen 61.8k8888 gold badges291291 silver badges469469 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 15

It is possible and it will apply it to both the slice and the tooltip. What you need to include is a number formatter.

The key things are to apply the following before you 'create' the chart.

var formatter = new google.visualization.NumberFormat({
    prefix: '$'
});
formatter.format(data, 1);

var options = {
    pieSliceText: 'value'
};

This first creates the formatter and applies it to the data, the next option then forces the pie chart to show the formatted value, rather than the calculated percentage. You can see it working in this jsfiddle.

Inspired and adapted by the answer here: Formatting google charts programmatically

本文标签： javascriptGoogle charts display Money not PercentagesStack Overflow