Question

我有一个谷歌图表日历，我想将工具提示中的数字格式化为以下格式：＃，###。

我尝试了以下内容：

function drawCalendar(){
    var data = new google.visualization.DataTable();
    data.addColumn("date","Date");
    data.addColumn("number","Users");
    data.addRows(calendarArray);
    var formatter = new google.visualization.NumberFormat({pattern:"#,###"});
    formatter.format(data,1);
}

我使用Google Visualization API Reference Number format specification （如上面的代码中所使用的）饼图，条形图和地理图表，它工作正常。我无法弄清楚为什么这不起作用。

图表正在渲染，但没有格式化的数字，例如： 2016年1月19日：19394 - Google chart calendar tooltip with the formatted number。

我使用了错误的功能吗？日历图表是否有特殊的数字格式？

Answer 1

你没有做错任何事，它只对日历图表不起作用默认工具提示似乎忽略格式化的值。

无论如何，可以提供自定义工具提示在这里，我使用视图为每一行添加工具提示它只返回每列的默认格式。

我还在选项中添加tooltip: { isHtml: false }。（默认为真）
否则，工具提示没有填充，较小的字体等...

如果默认设置不足，可以使用格式化程序来更改模式...

google.charts.load('44', {
  callback: drawChart,
  packages: ['calendar']
});

function drawChart() {
  var calendarArray = [
    [ new Date(2012, 3, 13), 37032],
    [ new Date(2012, 3, 14), 38024],
    [ new Date(2012, 3, 15), 38024],
    [ new Date(2012, 3, 16), 38108],
    [ new Date(2012, 3, 17), 38229],
    [ new Date(2013, 9,  4), 38177],
    [ new Date(2013, 9,  5), 38705],
    [ new Date(2013, 9, 12), 38210],
    [ new Date(2013, 9, 13), 38029],
    [ new Date(2013, 9, 19), 38823],
    [ new Date(2013, 9, 23), 38345],
    [ new Date(2013, 9, 24), 38436],
    [ new Date(2013, 9, 30), 38447]
  ];

  var data = new google.visualization.DataTable();
  data.addColumn("date", "Date");
  data.addColumn("number", "Users");
  data.addRows(calendarArray);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (viewData, row) {
      return viewData.getFormattedValue(row, 0) + ': ' +
             viewData.getFormattedValue(row, 1);
    },
    type: 'string',
    role: 'tooltip'
  }]);

  var options = {
    height: 350,
    tooltip: {
      isHtml: false
    },
    width: 1000
  };

  var chart = new google.visualization.Calendar(
    document.getElementById('calendar_basic')
  );
  chart.draw(view, options);
}

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

工具提示中的Google日历图表编号格式

1 个答案: