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
        ],
      }
    ]
  }
]

Вот так выглядит моя диаграмма

Моя диаграмма


timeline apexcharts
person Andrian Stoykov    schedule 28.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У меня была аналогичная проблема, и я решил ее, используя общее общее значение «x» («Производство» в вашем примере) и установив значения «name» в массивах данных серии, которые затем отображались с помощью 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"]
  }
}

Проверьте это здесь

person jesse crossley    schedule 06.05.2020
comment
В конце концов, я использовал тот же подход, но оказалось, что apexcharts - это не то, что мне нужно, потому что в данный момент у них нет масштабирования временной шкалы, что очень досадно. Спасибо за ваш ответ. - person Andrian Stoykov; 25.05.2020