自定义谷歌图表

Question

我想绘制一个双Y轴和两个值系列的条形图。 问题是：

• 如何自定义x轴标签？我希望以'dd/MM HH：mm：ss'格式查看日期时间，但hAxis.format在google.charts.Bar中不起作用
• 如何自定义工具提示格式？它根据浏览器设置以区域设置格式显示，但我想使用我自己的严格格式。例如，x轴的'dd/MM HH：mm：ss';提示调音作为google.visualization。*的确也不能与google.charts.Bar工作

注意，对于定制轴标签和工具提示是在google.visualization工作正常。*，但我需要一个柱形图双y轴，只能用google.charts实现。条形码

以下是sample, drawing a chart with random data.所有自定义JavaScript都是内联的。 酒吧代表30分钟的时间段。

这里是JS代码：

 /** 
     * transform a number of seconds to [ hour, min, sec ] array 
     */ 
     function sec2array(d) { 
      d = Math.round(parseFloat(d)); 
      var h = Math.floor(d/3600); 
      var m = Math.floor((d % 3600)/60); 
      var s = d % 60; 
      return [ h, m, s ]; 
     } 

     /** 
     * represents a number of seconds in 'HH:ii:ss' format 
     */ 
     function fmtInterval(d) { 
      var arr = sec2array(d); 
      return (arr[0] < 10 ? '0' : '') + arr[0] 
       + ':' + (arr[1] < 10 ? '0' : '') + arr[1] 
       + ':' + (arr[2] < 10 ? '0' : '') + arr[2]; 
     } 

     /** 
     * let's draw a sample chart with random data 
     */ 
     function drawChart() { 
      var formatter = new google.visualization.DateFormat({ pattern: 'dd/MM HH:mm' }); 

      var data = new google.visualization.DataTable({ 
       cols: [ 
        { id: 'stamp', label: 'Time', type: 'datetime' }, 
        { id: 'viewers', label: 'Viewers', type: 'number' }, 
        { id: 'avgtime', label: 'Avg time', type: 'timeofday' }, 
       ], 
      }, 0.6); 

      // Making a Date object to iterate through the period 
      var dd = new Date(); 
      dd.setDate(dd.getDate()-1); 
      dd.setHours(0); 
      dd.setMinutes(0); 
      dd.setSeconds(0); 
      dd.setMilliseconds(0); 

      for(var i = 0;i < 1440;i += 30) { 
       var avgtime = Math.random() * 1800; // 0 ... 30 minutes 
       data.addRow([ 
        // first column: the time scale 
        { v: new Date(dd), f: formatter.formatValue(dd) }, // formatted value does not work 

        // second column: random viewers count 
        Math.floor(Math.random() * 50), 

        // third column: average watch duration in form of timeofday. It can not be over 30 minutes, so I can do it in such kind 
        sec2array(avgtime), 
       ]); 

       // increase datetime by 30 minutes 
       dd.setMinutes(dd.getMinutes() + 30); 
      } 

      var options = { 
       width: 1000, height: 300, 
       title: 'TV channel load chart', 
       tooltip: { isHtml: true }, 
       focusTarget: 'category', 
       bars: 'vertical', 
       series: [ 
        { axis: 'viewers' }, 
        { axis: 'avgtime' } 
       ], 
       hAxis: { 
        format: 'dd/MM HH:mm' 
       }, 
       axes: { 
        y: { 
         viewers: { label: 'Viewvers' }, 
         avgtime: { side: 'right', label: 'Avg time' } 
        } 
       }, 
      }; 

      var chart = new google.charts.Bar(document.getElementById("chart")); 
      chart.draw(data, options); 
     } 

     // load google visualization API. Draw the chart when load complete 
     google.load("visualization", "1.1", 
      { packages: [ "corechart", "bar" ], 
      callback: drawChart } 
     ); 

Answer 1

读取由谷歌提供的information：

使用google.charts.Bar.convertOptions（）允许您利用某些功能，如hAxis/vAxis .format预设选项。

你的代码看起来像

chart.draw(data, options); 

，改变它

chart.draw(data, google.charts.Bar.convertOptions(options)); 

使一切工作正常。

Link to my fiddle

Answer 2

如果我是你，我会用Moment.js做自定义日期格式。就像这样：

moment().format("dd/MM HH:mm:ss");