代码之家 › 专栏 › 技术社区 › RasmusGP

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

column-chart date-format google-visualization date javascript

RasmusGP · 技术社区 · 9 年前

我正在尝试使用 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>

1 回复 | 直到 9 年前

WhiteHat 9 年前

无论如何,建议对柱状图使用离散轴(字符串)

可以使用数据格式化程序转换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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前