Question

我正在尝试创建一个甘特图，以显示时间轴上的事件。我当前的图表中所有事件均始于时间0，而不是始于它们的起点。

我知道大约一年前，chartjs没有可以实现此功能的功能，但是有一个请求请求正在努力添加此功能。这是拉取请求的链接：https://github.com/chartjs/Chart.js/pull/5262

pull请求已被合并，我希望这意味着已添加该功能，但我仍然看不到正在创建的甘特图的任何示例。

const data = {
      labels: this.getCategoryEvents(
        this.state.selectValue1,
        this.state.selectValue2,
        this.state.selectedCategory
      ),
      datasets: [
        {
          label: "Session Events",
          backgroundColor: "rgba(255,99,132,0.2)",
          borderColor: "rgba(255,99,132,1)",
          borderWidth: 2,
          hoverBackgroundColor: "rgba(255,99,132,0.4)",
          hoverBorderColor: "rgba(255,99,132,1)",
          data: [
            {
              x: new Date(),
              y: 10
            },
            {
              x: new Date(),
              y: 25
            }
          ]
        }
      ]
    };

这就是我定义数据的方式。 x和y是我在chartjs文档中找到的：https://www.chartjs.org/docs/latest/axes/cartesian/time.html 但是我不确定我是否以正确的方式使用它。 getCategoryEvents（）函数以对象格式返回所有事件的列表，其中包括它们的开始和结束时间。

                <HorizontalBar
                  data={data}
                  options={{
                    responsive: false
                  }}
                  width={300}
                  height={250}
                />
              </div>

这是在类的return方法中即时呈现图表的方式。

我不确定这是否可行，如果不能，那么可以使用什么库来创建符合我的规范的甘特图。（首选具有良好文档和示例的库）

使用chart.js条形图创建具有开始时间和结束时间的甘特图

0 个答案: