Question

我正在尝试进行列式聊天，使用Google charts，垂直轴上的数字和水平轴上的日期。由于某种原因，日期格式不会打印小时，分钟或秒。它确实适用于年，月和日。

我正在使用“M-d，HH：mm：ss”格式来格式化并打印此时间戳：“2017-07-15 20:10:30”但是打印

7-17,00：00：00 而非 7-17,20：10:30

这是一个错误还是我错过了什么？

<html>
    <head>
    <script src="https://www.google.com/jsapi?ext.js"></script>
    </head>


   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() 
      {

        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Present');


        data.addRows([
            [new Date("2017-07-15 20:10:30"), 5]
          ]);

        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" 
                        }]);

        var options = {
            width: 600,
            height: 400,
            //bar: {groupWidth: "95%"},
            legend: { position: "none" },
            vAxis: {title: 'Times occured'},
            hAxis: {
                format: "M-d, HH:mm:ss", // <------- This shows: "7-17,00:00:00" not "7-17, 20:10:30"
                //format: "HH:mm",
                //format:'M-d H:mm',

                title: 'Date',
            },
        };
        var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
        chart.draw(view, options);
      }
    </script>

<body class="chart">
    <div id="chart_div"></div>
</body>
</html>

Answer 1

看起来像某种bug，

建议使用柱形图的离散轴（字符串）

您可以使用数据格式化程序转换x轴

请参阅以下工作代码段...

google.charts.load("current", {
  callback: drawChart,
  packages:["corechart"]
});

function drawChart() {
  var formatDate = new google.visualization.DateFormat({
    pattern: 'M-d, HH:mm:ss'
  });

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Present');
  data.addRows([
    [new Date("2017-07-15 20:10:30"), 5]
  ]);
    
  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (dt, row) {
      return formatDate.formatValue(dt.getValue(row, 0))
    },
    type: "string",
    label: data.getColumnLabel(0)
  }, 1, {
    calc: "stringify",
    sourceColumn: 1,
    type: "string",
    role: "annotation" 
  }]);

  var options = {
    width: 600,
    height: 400,
    legend: { position: "none" },
    vAxis: {title: 'Times occured'},
    hAxis: {
      title: 'Date'
    }
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
  chart.draw(view, options);
}

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

Google Charts ColumnChart日期格式未显示分钟和小时数

1 个答案: