Question

我正在研究像Chartjs一样投下甘特图。

我想要做的是使用时间类型绘制和HorizontalBarChart，作为混合类型，我为每个条设置最小值，但似乎它不起作用。

我的代码：

new Chart(document.getElementById("customChart"), {
    type: 'horizontalBar',

        data: {
            labels: ['Item 1', 'Item 2'],
            datasets: [
                {
                    type: 'horizontalBar',
                    label: 'Bar Component1',
                    data: [new Date(2017,02,26) ],
                    options:{
                        scales:{
                            xAxes: [{

                                  type: 'time',
                                  unit: 'day',
                                  unitStepSize: 1,
                                time: {
                                    displayFormats: {
                                       'day': 'YYYY-MM-DD'
                                    },
                                    min: new Date(2017,03,24)
                                }
                            }]
                        }
                    }
                },
                {
                    type: 'horizontalBar',
                    label: 'Bar Component2',
                    data: [new Date(2017,02,14)],
                    options:{
                        scales:{
                            xAxes: [{

                                  type: 'time',
                                  unit: 'day',
                                  unitStepSize: 1,
                                time: {
                                    displayFormats: {
                                       'day': 'YYYY-MM-DD'
                                    },
                                    min: new Date(2017,02,10)
                                }
                            }]
                        }
                    }
                }
            ]
        }

});

为了实现这个，有没有解决方法？我应该使用另一个图书馆吗？

Answer 1

不幸的是，没有办法配置chart.js来生成甘特图，因为您在图表上绘制的每个数据集都从原点（在刻度上设置的最小值）开始，或者堆叠在每个数据集的顶部。其他。您不能将图表配置为堆叠条形图，而是将它们显示在不同的“通道”中（这是甘特图所需要的）。

即使您尝试创建多个比例（看起来像您正在尝试），它也不会起作用，因为第二个条仍将从原点开始（但是第二个比例的原点将是您指定的最小值）。换句话说，两个条仍将触及y轴。

您在使用chart.js配置时遇到了一些问题。首先，您无法在数据集中定义比例配置。其次，您尝试使用多个时间刻度选项，但它们必须位于time对象内。

我清理了所有内容，以便您可以看到如何正确定义图表。这是一个codepen来证明这一点。

Answer 2

当前[2018年11月] chart.js无法这样做。

但是，如果您愿意应用补丁，则会有一个待处理的请求请求，它将完全实现此功能：https://github.com/chartjs/Chart.js/pull/5262

出于我的目的，我修改了https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.bar.js

的代码

@@ -453,10 +453,12 @@ module.exports = function(Chart) {

                        helpers.canvas.clipArea(chart.ctx, chart.chartArea);

-                       for (; i < ilen; ++i) {
-                               if (!isNaN(scale.getRightValue(dataset.data[i]))) {
-                                       rects[i].draw();
-                               }
+                       if (dataset.label != 'noshow') {
+                               for (; i < ilen; ++i) {
+                                       if (!isNaN(scale.getRightValue(dataset.data[i]))) {
+                                               rects[i].draw();
+                                       }
+                               }
                        }

                        helpers.canvas.unclipArea(chart.ctx);

使用像这样的条形图：

    var gapdemo= new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: ["todo1", "todo2", "todo3", "todo4"],
            datasets: [{
                type: 'horizontalBar',
                label: 'noshow',
                data: [1,2,4,3],
            },{
                type: 'horizontalBar',
                label: 'showme',
                data: [3,2,2,1],
            },{
                type: 'horizontalBar',
                label: 'noshow',
                data: [1,5,3,4],
            },{
                type: 'horizontalBar',
                label: 'showme',
                data: [2,2,1,4],
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    id: 'x-axis-1',
                    stacked: true
                }],
                yAxes: [{
                    id: 'y-axis-1',
                    stacked: true,
                    ticks: {beginAtZero: true}
                }]
            }                
        }
    });

这将导致如下所示的图表： barchart with gaps

Answer 3

自version 2.9.0起，Chart.js支持floating bars。现在可以使用语法[min, max]来指定各个小节。

这使得可以绘制甘特图。

var dates = [new Date("2019-12-24"), new Date("2019-12-26"), new Date("2019-12-30"), new Date("2020-1-2"), new Date("2020-1-4"), new Date("2020-1-9"), new Date("2020-1-10") ];

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
   type: 'horizontalBar',
   data: {
      labels: dates.map((d, i) => "Task " + i).splice(1),
      datasets: [
        {
          label: 'Tasks',
          data: dates.map((d, i) => i == 0 ? null : [dates[i - 1], d]).slice(1),
          backgroundColor: 'lightblue',
          borderWidth: 1
        }
      ]
   },
   options: {
      responsive: true,
      scales: {
         xAxes: [{
            type: 'time',
            time: {
               displayFormats: {
                  day: 'YYYY-MM-DD'
               }
            },
            ticks: {            
               min: dates[0].getTime(), 
               max: dates[dates.length - 1].getTime()
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Chartjs - 将开始和结束值设置为条形图

3 个答案: