个人中心
gpt4 book ai didi

javascript - 在谷歌图表纵轴中显示持续时间

转载 作者：行者123 更新时间：2023-11-30 19:03:07 26 4
gpt4 key购买 nike

使用 Google Charts，我需要以 hh:mm 格式在垂直轴上绘制持续时间。由于小时值可以大于 24 timeofday 是不合适的。 

<html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <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('string', 'Topping');
            data.addColumn('timeofday', 'Duration');
            data.addRows([
                ['Me', [23,59,0]],
                ['My Boss', [47,59,0]]
            ]);
            var options = {
                'title': 'How Long We Ate Pizza',
                'width': 400,
                'height': 300,
                'vAxis': { 'format':'HH:mm'}
            };
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
</head>
<body>
    <div id="chart_div"></div>
</body>
</html>

显示 My Boss 的 23:59 的图表。 Result graph如果我将其格式化为字符串，则会出现 Data column(s) for axis #0 cannot be of type string 错误。

有什么办法可以解决吗？

最佳答案

根据时间值动态构建图表，
首先使用数据 View 将时间转换为分钟

// use calculated column to convert time of day to duration in minutes
var view = new google.visualization.DataView(data);
view.setColumns([0, {
  calc: function (dt, row) {
    // initialize variables
    var minutesFormat = '';
    var minutesValue = 0;
    var timeofday = dt.getValue(row, 1);

    // calculate total minutes
    timeofday.forEach(function (value, index) {
      // determine time part
      switch (index) {
        // hours
        case 0:
          minutesFormat += value;
          minutesValue += (value * 60);
          break;

        // minutes
        case 1:
          minutesFormat += ':' + value;
          minutesValue += value;
          break;

        // seconds
        case 2:
          minutesValue += (value / 60);
          break;

        // miliseconds
        case 3:
          minutesValue += (value / 60000);
          break;
      }
    });

    // build object notation
    return {
      v: minutesValue,
      f: minutesFormat
    };
  },
  label: data.getColumnLabel(1),
  type: 'number'
}]);

然后对于 y 轴刻度，
首先，获取最大分钟数。 

// get range of duration in muntes
var range = view.getColumnRange(1);  // range.max

然后我们需要确定要四舍五入到 (10, 100, 1000) 的小时数

// determine max number of hours for y-axis
var maxHours = Math.ceil(range.max / 60);
var roundTo = parseInt('1' + Array(maxHours.toFixed(0).length).join('0'));
var maxHours = Math.ceil((range.max / 60) / roundTo) * roundTo;

然后构建我们的滴答声...

// build y-axis ticks
var ticks = [];
for (var hour = 0; hour <= maxHours; hour += roundTo) {
  ticks.push({
    v: hour * 60,
    f: hour + ':00'
  });
}

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('timeofday', 'Duration');
  data.addRows([
    ['Me', [23,59,0]],
    ['My Boss', [47,59,0]]
  ]);

  // use calculated column to convert time of day to duration in minutes
  var view = new google.visualization.DataView(data);
  view.setColumns([0, {
    calc: function (dt, row) {
      // initialize variables
      var minutesFormat = '';
      var minutesValue = 0;
      var timeofday = dt.getValue(row, 1);

      // calculate total minutes
      timeofday.forEach(function (value, index) {
        // determine time part
        switch (index) {
          // hours
          case 0:
            minutesFormat += value;
            minutesValue += (value * 60);
            break;

          // minutes
          case 1:
            minutesFormat += ':' + value;
            minutesValue += value;
            break;

          // seconds
          case 2:
            minutesValue += (value / 60);
            break;

          // miliseconds
          case 3:
            minutesValue += (value / 60000);
            break;
        }
      });

      // build object notation
      return {
        v: minutesValue,
        f: minutesFormat
      };
    },
    label: data.getColumnLabel(1),
    type: 'number'
  }]);

  // get range of duration in muntes
  var range = view.getColumnRange(1);

  // determine max number of hours for y-axis
  var maxHours = Math.ceil(range.max / 60);
  var roundTo = parseInt('1' + Array(maxHours.toFixed(0).length).join('0'));
  var maxHours = Math.ceil((range.max / 60) / roundTo) * roundTo;

  // build y-axis ticks
  var ticks = [];
  for (var hour = 0; hour <= maxHours; hour += roundTo) {
    ticks.push({
      v: hour * 60,
      f: hour + ':00'
    });
  }

  var options = {
    title: 'How Long We Ate Pizza',
    width: 400,
    height: 300,
    vAxis: {
      ticks: ticks
    }
  };

  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>

关于javascript - 在谷歌图表纵轴中显示持续时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59285562/

26 4 0
文章推荐： c - 没有 "Windows Security Alert"的网络程序
文章推荐： c# - 如何提取记录从 10 到 20
文章推荐： c# - 我在 C# 中声明了一个变量，但不能在 switch 语句中使用它
文章推荐： android - 使用 -fPIC 链接静态 C 库并重新编译时出现错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com