图表库建议请求

Question

我必须找到一个能够创建图表的库，就像图片中的那个。我试过Chart.js和AnyChart，但它们似乎无法处理下面的图表。

场景是:客户拥有车辆，他希望在图表上看到车辆活动百分比。Y轴是从早上6点到晚上7点之间的一个小时，X轴是一周中最高的几天，“工作”状态相对于“点火”和“无点火”状态所占的百分比。列必须堆叠，相同数据类型的多个数据必须放在同一栏中。

例如:星期一上午六时至上午八时四十分，点火时间(但无感官工作数据)由上午八时四十分至下午十二时五十分，点火时间为下午十二时五十分至下午三时，而工作时间则为下午三时至七时。

Chart.js的问题是它不能处理值范围，而且我不能为同一天添加多个相同的状态。AnyChart能够处理值范围，但这是一种不能堆叠的图表类型。

有人能建议一个图表库来实现这种数据可视化，还是我应该从头开始对它进行编码呢？提前谢谢你！

Answer 1

谢谢你的建议！

不幸的是，建议的库中没有一个像我想的那样工作，所以我自己用html、css和javascript为这个任务创建了一个自定义列图表库。

Answer 2

我建议看看开源JavaScript库，它非常灵活和强大，包括堆叠条形图。

在线文件的一个例子：

var trace1 = {
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [20, 14, 23],
  name: 'SF Zoo',
  type: 'bar'
};

var trace2 = {
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [12, 18, 29],
  name: 'LA Zoo',
  type: 'bar'
};

var data = [trace1, trace2];

var layout = {barmode: 'stack'};

Plotly.newPlot('myDiv', data, layout);

给予(鼠标悬停在中间栏上)：

Answer 3

尝试基于d3.js的https://c3js.org/ c3.js，并且可以很容易地定制和实现。