自定義谷歌圖表

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");