时间戳

首页 > 解决方案 > 2 轴格式日期谷歌图表的问题

charts - 2 轴格式日期谷歌图表的问题

问题描述

我正在尝试像这样格式化轴上的日期：May '18。我的格式如下所示：'MMM \' yy'。我有两个问题： 1. 我应该怎么做才能使月份的第一个字母大写？我需要生成刻度来实现这一点吗？2. 一个撇号有问题，即当它在它之后应用它时，不再使用格式，并且撇号本身没有显示出来。例如，上面看起来像这样：may yy。我还尝试使用 ASCII 和 Unicode 中的撇号字符，但这不起作用。只是谷歌图表可能将撇号视为不能使用的字符......有什么建议吗？

编辑：

用撇号解决问题。\u2019不完全是撇号。正确的撇号是：https ://unicode-table.com/en/0027/ ，但无论如何它看起来都不错。

但是，就我而言，这个月的第一个字母仍然很小，因为我使用波兰语翻译。对此有什么建议吗？

编辑：

问题解决了。

标签： chartsformatgoogle-visualizationaxisapostrophe

解决方案

你可以像这样使用 unicode -->\u2019 

hAxis: {
  format: 'MMM \u2019yy'
}

请参阅以下工作片段... 

google.charts.load('current', {
  packages: ['controls', 'corechart', 'table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [new Date(2018, 4, 1), 1],
    [new Date(2018, 5, 2), 2],
    [new Date(2018, 6, 3), 3],
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, {
    hAxis: {
      format: 'MMM \u2019yy'
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

编辑

要在使用语言代码时将第一个字母大写，请
使用该ticks选项而不是format
手动更改第一个字母toUpperCase... 

  ticks: data.getDistinctValues(0).map(function (date) {
    var value = formatDate.formatValue(date);
    value = value.substring(0, 1).toUpperCase() + value.substr(1);
    return {
      v: date,
      f: value
    };
  })

请参阅以下工作片段... 

google.charts.load('current', {
  packages: ['corechart'],
  language: 'pl'
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [new Date(2018, 4, 1), 1],
    [new Date(2018, 5, 2), 2],
    [new Date(2018, 6, 3), 3],
  ]);

  var formatDate = new google.visualization.DateFormat({
    pattern: 'MMM \u2019yy'
  });

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, {
    hAxis: {
      ticks: data.getDistinctValues(0).map(function (date) {
        var value = formatDate.formatValue(date);
        value = value.substring(0, 1).toUpperCase() + value.substr(1);
        return {
          v: date,
          f: value
        };
      })
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

推荐阅读