時間：分鐘：HighCharts中的秒數柱狀圖

我想要繪製每個員工在使用Highcharts的條形圖中在手機上花費的時間長度。我沒有收到任何錯誤，但該圖並未繪製。任何意見前進將不勝感激。時間：分鐘：HighCharts中的秒數柱狀圖

<script type="text/javascript"> 
<!-- create the highcharts object --> 

$(function() { 
     $('#container').highcharts({ 



      chart: { 
       type: 'column', 
      backgroundColor: 'transparent' 
      }, 
      title: { 
       text: '' 
      }, 

      xAxis: { 
       categories: ['May 2013', 'June 2013', 'July 2013', 'August 2013', 'September 2013', 'October 2013', 'November 2013', 'December 2013', 'January 2014', 'February 2014', 'March 2014', 'April 2014', ] 
      }, 
      yAxis: { 
      // type: 'datetime', //y-axis will be in milliseconds 
      dateTimeLabelFormats: { //force all formats to be hour:minute:second 
       second: '%H:%M:%S', 
       minute: '%H:%M:%S', 
       hour: '%H:%M:%S', 
       day: '%H:%M:%S', 
       week: '%H:%M:%S', 
       month: '%H:%M:%S', 
       year: '%H:%M:%S' 
      }, 
       title: { 
        text: 'Time Spent on Phone' 
       } 
      }, 
      tooltip: { 
       headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
       pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
        '<td style="padding:0"><b>{point.y} calls</b></td></tr>', 
       footerFormat: '</table>', 
       shared: true, 
       useHTML: true 
      }, 
      plotOptions: { 
       column: { 
        pointPadding: 0.2, 
        borderWidth: 0 
       } 
      }, 
      series: [ 
      { name: 'Michelle', data: ["02:19:36", "02:37:26", "01:57:27", "02:23:49", "02:10:49", "02:32:33", "02:16:10", "01:25:01", "00:50:49", "0", "0", "0", ] },{ name: 'Kim', data: ["04:53:56", "09:21:07", "10:32:46", "10:30:21", "09:15:12", "09:15:57", "06:19:16", "08:59:23", "06:11:48", "0", "0", "0", ] },{ name: 'Katie', data: ["0", "0", "0", "0", "0", "0", "0", "08:00:14", "03:59:01", "0", "0", "0", ] },   ] 
     }); 
    }); 
</script> 
</div>

來源

2014-02-06 Dan

您是否包含jquery，然後是highcharts js文件？ – wergeld

是的，我做到了。圖表的輪廓顯示，但沒有繪製條形圖。 – Dan

我在這裏的答案可能會對你有所幫助：http://stackoverflow.com/questions/21227847/how-to-pass-time-in-highcharts/21268457#21268457 – jlbriggs

你需要設置你的yAxis.type: 'datetime'，你需要你的series.data格式進行有效的時間JavaScript的時間。目前，您已將yAxis設置爲值（默認值），而您的數據實際上是一個字符串（例如「02:19:36」）。這需要轉換爲JavaScript時間。

編輯 - Date.UTC()的示例。 Date.UTC(0, 0, 0, 2, 19, 36)

既然你不t care about year/month/day but the function requires year and month I just set them to 0. Replace all your string dates such that your data`樣子：

data: [Date.UTC(0, 0, 0, 2, 19, 36), Date.UTC(....), etc]

Here是一個更新的撥弄只是一組數據

要爲「米歇爾」用你的第一個條目轉換。注意到我將系列類型更改爲'line'。 '列'類型很有趣。

Fixed'列'類型的問題，但設置任意yAxis分年/月/日，並設置數據點使用相同的值，以便唯一的區別是時間。

來源

2014-02-06 20:46:21 wergeld

這是我卡住的部分雖然。那裏以及如何轉換那個時間？ – Dan

您可以在字符串上使用split（）函數，然後粘貼元素intio Date.UTC（）。第二種解決方案是使用Date.parse（） –

對不起。我失去了這些東西。你可以給我一個例子，使用我上面的代碼如何做到這一點？我不是一個JavaScript傢伙。 – Dan

時間：分鐘：HighCharts中的秒數柱狀圖

回答

相關問題