谷歌图表中的工具提示数字格式化

Question

我该如何在谷歌图表的工具提示中格式化数字？我尝试在数据表中应用"none"格式，也在谷歌图表选项中对横轴应用"####"格式，但仍然可以在工具提示中看到2,012。

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
            [
            {label: "year", type: "number", format: "none"},
            {label: "performance", type: "number", format: "none"},
        ],
        ["2009", 10],
        ["2010", 15],
        ["2011", 3],
        ["2012", 5]
    ]);

    var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}, format: "####"},
      vAxis: {minValue: 0}
    };

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

JSFiddle可以在这里找到： https://jsfiddle.net/ux37j0dk/3/

- Joozty

Answer 1

默认情况下，工具提示会显示数据表格单元格的格式化值。

您可以使用NumberFormat类来格式化数据表格...

  var yearPattern = "0";
  var formatNumber = new google.visualization.NumberFormat({
    pattern: yearPattern
  });
  formatNumber.format(data, 0);

请看以下可工作示例...

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    [{
        label: "year",
        type: "number",
        format: "none"
      },
      {
        label: "performance",
        type: "number",
        format: "none"
      },
    ],
    ["2009", 10],
    ["2010", 15],
    ["2011", 3],
    ["2012", 5]
  ]);
  
  var yearPattern = "0";
  var formatNumber = new google.visualization.NumberFormat({
    pattern: yearPattern
  });
  formatNumber.format(data, 0);

  var options = {
    title: 'Company Performance',
    hAxis: {
      title: 'Year',
      titleTextStyle: {
        color: '#333'
      },
      format: yearPattern
    },
    vAxis: {
      minValue: 0
    }
  };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

---

当加载数据表时，您还可以使用对象表示法提供值(v:)和格式化值(f:)...

[{v: "2009", f: "2009"}, 10],

请查看下面的代码片段...

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    [{
        label: "year",
        type: "number",
        format: "none"
      },
      {
        label: "performance",
        type: "number",
        format: "none"
      },
    ],
    [{v: "2009", f: "2009"}, 10],
    [{v: "2010", f: "2010"}, 15],
    [{v: "2011", f: "2011"}, 3],
    [{v: "2012", f: "2012"}, 5]
  ]);
  
  var yearPattern = "0";

  var options = {
    title: 'Company Performance',
    hAxis: {
      title: 'Year',
      titleTextStyle: {
        color: '#333'
      },
      format: yearPattern
    },
    vAxis: {
      minValue: 0
    }
  };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

- WhiteHat

---

嗨，谢谢，它有效。只有一个问题，如何在DataView类上使用它？我的意思是第一个解决方案与google.visualization.NumberFormat。 - Joozty

格式化程序在数据视图上无法工作，请在创建视图之前应用，或将视图转换回数据表--> view = view.toDataTable();-- 然后使用格式化程序... - WhiteHat