Javascript 在谷歌图表垂直轴上显示持续时间_Javascript_Charts_Google Visualization

Javascript 在谷歌图表垂直轴上显示持续时间

javascript charts google-visualization

Javascript 在谷歌图表垂直轴上显示持续时间,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,使用谷歌图表，我需要以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/javascr

使用谷歌图表，我需要以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>


load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Topping'）；
data.addColumn（'timeofday'，'Duration'）；
data.addRows([
[Me'，[23,59,0]]，
[“我的老板”[47,59,0]]
]);
变量选项={
“标题”：“我们吃比萨饼多久了”，
“宽度”：400，
‘高度’：300，
'vAxis'：{'format'：'HH:mm'}
};
var chart=new google.visualization.ColumnChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}

显示我老板的

23:59

的图表。如果将其格式化为字符串，则轴0的

数据列不能为字符串类型

错误

有什么办法可以处理吗？

感谢WhiteHat的评论和支持

在添加值和记号时使用对象符号

data.addRows([
    ['Me', { v: 1439, f: '23:59' }],
    ['My Boss', { v: 2879, f: '47:59' }]
]);
var options = {
    'title': 'How Long We Ate Pizza',
    'width': 400,
    'height': 300,
    'vAxis': {
        ticks: [{ v: 720, f: '12:00' }, { v: 1440, f: '24:00' }, { v: 2160, f: '36:00' }, { v: 2880, f: '48:00' }]
    }
};

要从timeofday值动态构建图表，
首先使用数据视图将timeofday转换为分钟

// 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

然后我们需要确定四舍五入到（101001000）的小时数

然后建立我们的滴答声

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

//构建y轴刻度
var=[]；
对于（var hour=0；hour这是可能的，您可以使用对象表示法来提供持续时间的值（v:
）和持续时间的格式化值（f:
）-->，因此如果我们的值以分钟为单位，我们就可以-->{v:190，f:'03:10'}如果您想提供数据和图表代码的示例，我可以提供一个工作示例…我添加了示例代码。很高兴您能够解决此问题，在这里，我根据原始的timeofday值动态构建。。。
// build y-axis ticks
var ticks = [];
for (var hour = 0; hour <= maxHours; hour += roundTo) {
  ticks.push({
    v: hour * 60,
    f: hour + ':00'
  });
}