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。