Highcharts的時間格式

Question

我使用Highcharts爲我的項目顯示一些圖表。

但我有一些問題要顯示在Yaxis上只有TIME（不是日期）的基本條形圖。 我搜索了一些解決方案，但我沒有找到好的解決方案。 目前，我把數據以毫秒爲單位。

但它給了我這樣的結果： http://s14.postimg.org/z4vissaht/Capture_d_cran_2013_05_31_21_24_01.png

正如你所看到的，它說我「無效的日期」和毫秒顯示器，但我想它是「00:00:00」。 在圖表的底部，時間是很好的格式，但它每24小時重置一次，而我不需要它。如果毫秒數爲62:00:00，我希望它能像那樣顯示。

我真的需要幫助，我不知道該怎麼做。

還有就是我的jQuery代碼：

$('#chartTimeSpent').highcharts({ 
      chart: { 
       renderTo : 'chartTimeSpent', 
       type: 'bar' 
      }, 
      title: { 
       text: 'Time spent per technicians ' + dateInterval 
      }, 

      xAxis: { 
       categories: [ 'Department','Department','Department','Department','Department','Department','Department','Department','Department','Department','Department','Department', ], 
       title: { 
        text: null 
       } 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Time (hours)', 
        align: 'high' 
       }, 
       labels: { 
        overflow: 'justify' 
       }, 
       type: 'datetime', 

       dateTimeLabelFormats : { 
       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' 
      } 
      }, 
      tooltip: { 
       formatter: function() { 
        return ''+ 
         "" + 
         'Time: '+ Highcharts.dateFormat('%H:%M:%S', this.x); 
       } 
      }, 
      plotOptions: { 
       bar: { 
        dataLabels: { 
         enabled: true 
        } 
       } 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'top', 
       x: -100, 
       y: 100, 
       floating: true, 
       borderWidth: 1, 
       backgroundColor: '#FFFFFF', 
       shadow: true 
      }, 
      credits: { 
       enabled: false 
      }, 
      series: [ 

       {name: 'Someone', 
        data: [300000 ,0,6720000 ,6600000 ,11400000 ,1500000 ,900000 ,0,0,300000 ,0,0, ] },{name: 'Someone', 
        data: [2100000 ,1800000 ,1200000 ,3300000 ,60600000 ,0,13920000 ,5400000 ,18900000 ,300000 ,0,0, ] },{name: 'Someone', 
        data: [9840000 ,223380000 ,300000 ,3120000 ,8760000 ,2460000 ,9300000 ,2820000 ,3960000 ,1320000 ,900000 ,540000 , ] },   ] 
     }); 

EDITED：last jsFiddle

Answer 1

編輯基於期望的結果： 你的主要問題是，你有很多JS錯誤的（額外的逗號，等等）。修正了這些。現在，爲什麼你的圖表沒有顯示（據我所知）是因爲你的chart.title期望一個var被附加到它（text: 'Time spent per technicians ' + dateInterval），並且至少在你給你的jsFiddle和示例代碼中沒有定義它。

我更新了一個新的jsFiddle我認爲它是你想要的。請注意，表格列表中的值與系列數據中的JavaScript時間不匹配。

您的數據不包含任何時間值。您將要麼將其包含在數據序列中作爲[[time1, value], [time2, value]...]，要麼需要爲xAxis指定一個起始位置（pointStart），並告訴它每個數據點增量是多少（pointInterval） - 假設您的數據是分開的在時間一致 - 這樣的：

plotOptions: { 
      series: { 
       pointStart: Date.UTC(2010, 0, 1), 
       pointInterval: 24 * 3600 * 1000 // one day 
      } 
     }, 

強烈建議您閱讀API文檔中發現here。

編輯答案：

你有很多其他的東西，那就是錯在這裏您的圖表： 你Y軸不可能是type: 'datetime'。即使你認爲時間被繪製在yAxis上，因爲這是一個BAR圖表，它仍然是xAxis。刪除yAxis中的type和dateTimeLabelFormats項目，並將其放入xAxis中。

刪除您的xAixix的categories:部分。您不能混用日期時間和類別。

您在系列數據點列表中有額外的逗號，並且在最後一個系列項後面有一個額外的逗號。

您需要在series部分中指定plotOptions。例如，請參閱here。我會推薦jsFiddle或任何其他「實時」javascript服務來測試你的代碼。

這是顯示時間，而只是直接小時：分鐘，沒有白天的部分擔憂： 刪除type: 'datetime'和房屋/分/秒等 標籤格式化的東西添加以下 -

labels: { 
      overflow: 'justify', 
      formatter: function() { 
       var seconds = (this.value/1000) | 0; 
       this.value -= seconds * 1000; 

       var minutes = (seconds/60) | 0; 
       seconds -= minutes * 60; 

       var hours = (minutes/60) | 0; 
       minutes -= hours * 60; 
       return hours; 
      } 
     } 

要處理數據標籤，我們需要做一些其他重新格式化。現在，請帶上一點鹽，因爲我不是js專家，我相信這是過分冗長的，可以用簡單的方法完成。

formatter: function() { 
        if (this.y === 0) { 
         return 0; 
        } 
        else { 
        var hours = (((this.y/1000)/60)/60).toFixed(2); 
        var hourPortion = hours.toString().split(".")[0]; 
        var minPortion = hours.toString().split(".")[1]; 
        var minPortionUsed = (parseInt(hours.toString().split(".")[1]) * 0.6).toFixed(0); 
         if (minPortionUsed < 10) { 
          minPortionUsed = '0' + minPortionUsed.toString(); 
         } 
        return hourPortion + ':' + minPortionUsed; 
        } 
       } 

看到此更新example。