Question

我正在使用Chart.js（www.chartjs.org）来显示工作期间花在活动上的时间。我有＆＃34;工作＆＃34;（绿色），＆＃34;吸烟＆＃34;（红色），＆＃34;午餐＆＃34;（橙色），＆＃34;在Toilette＆＃34;（蓝色））和＆＃34;在家里＆＃34;（灰色）我需要在一天内为每个工人展示所有这些。为此，我使用水平条形堆积图表，它看起来像这样：

Before setting the minimum value - x轴表示小时（0-24）

令我感到困扰的是，很多空间被用于＆＃34;在家里＆＃34;，但我想只看到从7到18的时间。我试图将得分最小值设置为7但是它没有＃39工作，之后看起来像这样：

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版本的错误。

作为一种解决方法，您可以使用xAxes的回调来执行回调：

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

有关回调的更多详细信息，请查看documentation。

Answer 2

options: {
  scales: {
      xAxes: [{
          display: true,
          ticks: {
              suggestedMin: 7
          }
      }]
  }
}

Answer 3

这将同时适用于垂直和水平

options:{
  scales: {
    xAxes: [{
      ticks: {
          suggestedMin: 0,
          suggestedMax: 100
      }
    }],
    yAxes: [{
      ticks: {
          suggestedMin: 0,
          suggestedMax: 100
      }
    }],
  },
}

x轴的最小值不适用于水平条形图| ChartJS

3 个答案: