x軸的最小值不適用於水平條形圖| ChartJS

Question

我正在使用Chart.js（www.chartjs.org）來顯示在工作中花費在活動上的時間。我有「工作」（綠色），「吸菸」（紅色），「午餐時間」（橙色），「淡香水」（藍色）和「家中」（灰色），我需要在一天中顯示所有人爲每個工人。對於這一點，我使用的是單槓堆積圖，它看起來像這樣：

Before setting the minimum value - X軸代表時間（0-24）

，我心裏有很多的空間用於「在家裏」，但我想我試圖蜱分鐘設置爲7只看到從7時至18，但它不工作，之後，它看起來像這樣：

After setting the minimum value to 7

你可以看到圖表搞砸了，我不知道爲什麼。我該如何實現x軸從7開始，數據仍然正確表示？

這裏是我的代碼：

var updateMainChart = function(data) { 

    $.ajax({ 
     type: "GET", 
     url: "api/get_activitytracks.php?q=commands", 
     success: function(response) { 
      response = JSON.parse(response); 
      if (response.statusCode == 200) { 

       //get activity names 
       var activities = $.map(response.data, function(n, i) { 
        return n.title; 
       }); 

       //get max number of activities 
       var names = []; 
       var max = 0; 
       Object.keys(data).forEach(function(key, index) { 
        names.push(key); 
       }); 
       $.each(data, function(key, value) { 
        if (value.length > max) { 
         max = value.length; 
        } 
       }); 

       //build datasets 
       var myDataSets = []; 
       var colors = [ 
        'rgba(0, 255, 0, 0.6)', 
        'rgba(255, 0, 0, 0.6)', 
        'rgba(0, 0, 255, 0.6)', 
        'rgba(255, 127, 80, 0.6)', 
        'rgba(128, 128, 128, 0.8)' 
       ]; 
       for (var i = 0; i < max; i++) { 

        for (var j = 0; j < activities.length; j++) { 
         var obj = {}; 
         obj["backgroundColor"] = Array.apply(null, Array(names.length)) 
          .map(String.prototype.valueOf, colors[j]); 
         //obj[borderColor] = 'rgba(255,255,255,1)'; 
         obj["borderWidth"] = 1; 
         obj["data"] = []; 
         obj["stack"] = "dummy"; 

         $.each(data, function(key, value) { 
          if (undefined !== value[i]) { 
           if (value[i]["title"] === activities[j]) { 
            obj["data"].push(value[i]["duration"]); 
           } else { 
            obj["data"].push(0); 
           } 
          } else { 
           obj["data"].push(0); 
          } 
         }); 
         myDataSets.push(obj); 
        } 
       } 

       $("#statsChart").show(); 

       $("#mainChart").html(""); 
       $("#mainChart").append('<canvas id="statsChart" height="70%"></canvas>'); 

       var myBarChart = new Chart($("#statsChart"), { 
        type: 'horizontalBar', 
        data: { 
         labels: names, 
         datasets: myDataSets 
        }, 
        options: { 
         scales: { 
          xAxes: [{ 
           stacked: true, 
           ticks: { 
            min: 7 
           } 
          }], 

          yAxes: [{ 
           stacked: true 
          }] 
         }, 
         legend: { 
          display: false 
         }, 
         tooltips: { 
          callbacks: { 
           label: function(tooltipItem) { 
            return tooltipItem.yLabel; 
           } 
          } 
         } 
        } 
       }); 
      } 
     } 
    }); 
}; 

感謝。

Answer 1

我相信這是一個當前Chart.js版本的bug。

作爲一種變通方法，你可以在你的xAxes這樣蜱使用回調：

options: { 
    scales: { 
     xAxes: [{ 
      stacked: true, 
      ticks: { 
       min: 0, 
       callback: function(value, index, values) { 
        return value + 7; 
       } 
      } 
     }], 
    ... 

有關回調更多的細節來看看documentation。