Может ли "Bar" быть размещен по центру вертикальной линии сетки в Chart.js ?

#javascript #svg #charts #chart.js #bar-chart

#javascript #svg #Диаграммы #chart.js #столбчатая диаграмма

Вопрос:

Мой текущий проект должен отображать такую графическую диаграмму.

В большинстве случаев Bar элемент находится в середине двух вертикальных линий сетки, но в моем случае он должен быть в центре 1 вертикальной линии сетки.

Я искал примеры кодов и документы API, но я не смог найти решение для моего случая.

Возможно ли нарисовать такой вид диаграммы с Chart.js ? введите описание изображения здесь

Ответ №1:

Вы пытались установить GridLines.offsetGridLines в false? Все должно работать нормально. Ознакомьтесь с документацией здесь: https://www.chartjs.org/docs/latest/charts/bar.html#scale-configuration

 options: {
  scales: {
    xAxes: [{
      gridLines: {
        offsetGridLines: false
      }
    }
  }
}

1. Спасибо. Я прочитал эту конфигурацию в документе, но я не смог ее четко понять. Вы спасли мой день.

2. Могу я задать вам еще один вопрос? Я попробовал offsetGridLines: false , и это работает хорошо, однако результат немного отличается от моего ожидаемого изображения. Каждая линия сетки должна находиться на одинаковом расстоянии от другой, но offsetGridLines: false обрезает (?) начальную и последнюю линии сетки, поэтому расстояние имеет размер в половину ширины. (Извините, поскольку мой английский не профессиональный, трудно хорошо описать мою ситуацию.)

3. Если возможно, не могли бы вы показать мне данные и конфигурацию chartjs, над которой вы сейчас работаете? У xAxes есть настройки для categoryPercentage , barThickness и barPercentage для настройки размера полосы и разрыва между категориями. Если у вас есть более 1 категории и вы хотите, чтобы они были сложены, а не располагались рядом друг с другом, вы также можете установить stacked: true . Подробнее о масштабе для xaxes: chartjs.org/docs/latest/axes

4. Спасибо за ответ, на самом деле я решил с помощью этой конфигурации: options > scales > xAxes > offset: false Немного расстраивает, что этой конфигурации нет даже в документе API.