如何使用Javascript更改Google图表中标签的格式类型 [英] How to change the format type of the label in Google Chart with Javascript

问题描述

如何使用Javascript作为下面的图像来更改Google Chart中标签的格式类型:

以下是我的数据(以美元为单位):

      ['2004',  340456060],
      ['2005',  581766089],
      ['2006',  666099879],
      ['2007',  1980361212],

1.当图表运行时，我想用,修改这些数字.因此，每当鼠标悬停时，它都必须是这样的:

• 2007年销售额:1,980,361,212
• 2006年销售额:666,099,879
• 2005年销售额:581,766,089
• 2004年销售额:340,456,060

2.如何将$添加为最后一个字符?

• 2007年销售额:1,980,361,212 $
• 2006年销售额:666,099,879 $
• 2005年销售额:581,766,089 $
• 2004年销售额:340,456,060 $

3.除此之外，如何将标签更改为%?

• 2007年销售额:55.6％
• 2006年销售额:18.6％
• 2005年销售额:16.3％
• 2004年销售额:9.5％

---

演示

HTML:

<div id="chart_div" style="width: 500px; height: 400px;"></div>

Javascript:

google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales'],
          ['2004',  340456060],
          ['2005',  581766089],
          ['2006',  666099879],
          ['2007',  1980361212]
        ]);

        var options = {
            title: 'Company Performance',
            vAxis: {title: 'Dollars'},
            hAxis: {title: 'Year'}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

解决方案

这是我的答案.我只添加突出显示代码.请让我知道是否出现问题.

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

演示

How to change the format type of the label in Google Chart with Javascript as my image below:

Here is my data (in US Dollars):

      ['2004',  340456060],
      ['2005',  581766089],
      ['2006',  666099879],
      ['2007',  1980361212],

1. When the chart runs, I would like to modify these figures with ,. Hence, whenever the mouseover, it must be like that:

• 2007 with Sales: 1,980,361,212
• 2006 with Sales: 666,099,879
• 2005 with Sales: 581,766,089
• 2004 with Sales: 340,456,060

2. How to add $ as the last character?

• 2007 with Sales: 1,980,361,212$
• 2006 with Sales: 666,099,879$
• 2005 with Sales: 581,766,089$
• 2004 with Sales: 340,456,060$

3. Besides that, how to change the label to %?

• 2007 with Sales: 55.6%
• 2006 with Sales: 18.6%
• 2005 with Sales: 16.3%
• 2004 with Sales: 9.5%

---

Demo

HTML:

<div id="chart_div" style="width: 500px; height: 400px;"></div>

Javascript:

google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales'],
          ['2004',  340456060],
          ['2005',  581766089],
          ['2006',  666099879],
          ['2007',  1980361212]
        ]);

        var options = {
            title: 'Company Performance',
            vAxis: {title: 'Dollars'},
            hAxis: {title: 'Year'}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

解决方案

Here is my answer. I just add the highlight code. Please let me know if something goes wrong.

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

Demo

这篇关于如何使用Javascript更改Google图表中标签的格式类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！