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

Google calendar chart number format in tooltip

本文关键字：数字 格式 日历 Google 工具提示      更新时间：2023-09-26

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

我尝试了以下方法：

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);
}

我使用谷歌可视化 API 参考编号格式规范（如上面的代码中使用）的饼图、条形图和地理图，它工作正常。我不知道为什么这不起作用。

图表正在呈现，但没有格式化的数字，例如：2016 年 1 月 19 日：19394 - 带有格式化数字的 Google 图表日历工具提示。

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

您没有做错任何事，它只是不适用于日历图表。
默认工具提示似乎忽略格式化值。

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

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

格式化程序可用于更改模式，如果默认值不够...

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>

相关文章：