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

Question

如何在谷歌图表的工具提示中格式化数字？我尝试在数据表中应用 "none" 格式，并在谷歌图表选项的 h 轴上应用 "####" 格式，但仍然可以在工具提示中看到 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/

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>