工具提示中的 Google 日历图表数字格式答案

【问题标题】：Google calendar chart number format in tooltip工具提示中的 Google 日历图表数字格式
【发布时间】：2016-03-14 20:13:47
【问题描述】：

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

我尝试了以下方法：

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.

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

【问题讨论】：

您想格式化数字，例如价格 10,000 1,00,000 等，对吗？

标签： javascript google-visualization

【解决方案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>

【讨论】：