代码之家 › 专栏 › 技术社区 › Joozty

google图表中的工具提示编号格式

google-visualization charts

Joozty · 技术社区 · 8 年前

如何在google图表的工具提示中设置数字格式?我试着申请 "none" 在datatable中设置格式并应用 "####" 在谷歌图表选项中的H轴上格式化,但在工具提示中仍然可以看到2012。

  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/

1 回复 | 直到 8 年前

WhiteHat 8 年前

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

你可以使用 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”></脚本>
<div id=“chart_div”></div>