x軸の最小値は水平棒グラフでは機能しません。 ChartJS

Question

私はChart.js（www.chartjs.org）を使用して、作業中の活動に費やされた時間の表示を示しています。私は「働く」（緑色）、「喫煙する」（赤色）、「At lunch」（オレンジ色）、「At Toilette」（青色）、「At home」（グレー）を持ち、1日中すべてを表示する必要がありますすべての労働者のために。そのために、私は横棒積み上げグラフを使用していますが、それは次のようになります。

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バージョンのバグだと思います。コールバックの詳細については

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

がdocumentationを見て：あなたはこのようなあなたxAxesのティックでコールバックを使用することができます回避策として

。