Question

看起来像Chart.js条形图，其中4个数据集在x轴上指定了不同的时间，它将显示每个X轴时间点，就像每次期望4个值一样。我想保留屏幕空间，仅显示当时具有数据的数据集，它们之间没有间隙。

我尝试指定嵌入x坐标的数据集，例如

var s1 = {
    label: 'group1',
    backgroundColor: 'blue',
    data: [
        { x: '2019-07-07 10:00:30', y: 100 },
        { x: '2019-07-07 10:05:28', y: 101 }
    ]
};
var s2 = {
    label: 'group2,
    backgroundColor: 'green',
    data: [
        { x: '2019-07-07 10:00:30', y: 71 }
        { x: '2019-07-07 10:10:13', y: 101 }
    ]
};
var s3 = {
    label: 'group3',
    backgroundColor: 'orange',
    data: [
        { x: '2019-07-07 10:00:30', y: 90 },
        { x: '2019-07-07 10:05:28', y: 95 },
        { x: '2019-07-07 10:10:13', y: 85 }
  ]
};

我尝试的另一件事是使用此模式：

标签：[“ 2019-07-07 10:00:30”，“ 2019-07-07 10:05:28”，“ 2019-07-07 10:10:13”]

并仅指定每个数据集的数据值，例如var s2-> data [71，101]->这种方法的问题在于，这两个数据值与第一个2个X轴时间点对齐，是不正确的，s2的数据点仅在10:00和10:10出现-如果我想用这种方法，则必须将数组指定为[71，0，101]。对于小型数据集，这是可以的，但此帖子的主要问题仍然存在-图表中的s1和s3的条形之间会有明显的分隔，而图表期望的是s2值。

也请记住，这是一个小例子，用以说明我们遇到的问题。实际上，我们正在处理成千上万个随机时间出现的数据点，这些数据点可能跨越数天，有时甚至根本没有，例如，构建多个包含0的10,000个元素数组以使组显示在屏幕上似乎很浪费。正确的X轴时间位置，这就是为什么我采用最初的方法来构建包含值的数据集的原因。

此方法的问题在于，它沿x轴创建的每个时间轴都希望每个数据集都有一个值/条-并非总是如此。我们经常会

考虑将网络流量绘制成图表以查找某些内容，通常您会定期获取某些网络通讯代码，而很少接收其他代码-您只想查看每次出现的值，而不必在两者之间留空格图表值。

没有错误发生，但是显示屏每次都为每个丢失的数据集值显示一个“空白栏”。因此，对于上面的示例，您将在10:00处看到3个彼此相邻的条形，但在10:05处，您将看到一个蓝色和橙色的条带，其中有一个空白，它期望绿色的条带存在-理想情况下， d就像蓝色和橙色的条形图彼此相邻，没有空白。

颜色和工具提示解释了足够存在的数据。很抱歉，冗长的解释。预先感谢您提出的建设性建议。

Chart.js分组条形图间距问题

0 个答案: