时间戳

首页 > 解决方案 > Apexcharts - 条形图太小

timeline - Apexcharts - 条形图太小

问题描述

我正在使用 Apexcharts 3.19.0 中的时间线图，我注意到每次添加新的垂直“类别”时，条形都会开始缩小。是否可以将条形高度设置为固定大小？

我正在构建一个代表生产线的时间线图。酒吧是生产，类别是机器。一个版本只与一台机器相关。

这是我通过的系列，如果我继续添加新机器，酒吧会继续缩小。

我注意到 Apexcharts 使每个条形图都具有这样的高度，以至于每一行都可以容纳所有条形图，但在我的情况下我不需要这个。

    [
  {
    "name": "B-2004281001-6763",
    "data": [
      {
        "x": "Cube 3-1",
        "y": [
          1588068083109,
          1588071676403
        ],
      }
    ]
  },
  {
    "name": "B-2004281000-8133",
    "data": [
      {
        "x": "BiZon Prusa i3 Steel-2",
        "y": [
          1588068021615,
          1588075213496
        ],
      }
    ]
  },
  {
    "name": "B-2004281001-9110",
    "data": [
      {
        "x": "BiZon Prusa i3 Steel-2",
        "y": [
          1588068068356,
          1588078856311
        ],
      }
    ]
  }
]

这就是我的图表的样子

我的图表

标签： timelineapexcharts

解决方案

我有一个类似的问题，我通过使用公共共享“x”值（在您的示例中为“Production”）并在随后由 dataLabels 显示的系列数据数组中设置“名称”值来解决它。

所以你修改的数据：

[
  {
    name: "B-2004281001-6763",
    data: [{ name: "Cube 3-1", x: "Production", y: [ 1588068083109, 1588071676403 ] }]
  },
  {
    name: "B-2004281000-8133",
    data: [{ name: "BiZon Prusa i3 Steel-2", x: "Production", y: [1588068021615, 1588075213496 ] }]
  },
  {
    name: "B-2004281001-9110",
    data: [{ name: "BiZon Prusa i3 Steel-2", x: "Production", y: [1588068068356, 1588078856311 ], } ]
  }
]

和相应的 dataLabels 选项（可见性的黑色文本颜色）

dataLabels: {
  enabled: true,
  formatter: function(val, opts) {
    return opts.w.config.series[opts.seriesIndex].data[opts.dataPointIndex].name;
  },
  style: {
    colors: ["#000000"]
  }
}

在这里查看

推荐阅读