Полосы по центру между линиями сетки с меткой под линиями сетки (chart.js)

Я хочу создать гистограмму, в которой столбцы располагаются по центру между линиями сетки. Такое поведение было возможно до этого запроса на слияние: https://github.com/chartjs/Chart.js/pull/4545

В исходной версии это было возможно с помощью offsetGridLines: false (шкала категорий).

Я создал stackblitz с помощью приложения angular, используя chart.js и ng2-charts: https://stackblitz.com/edit/angular-barchart-example-mg192a?file=src%2Fapp%2Fbarchart%2Fbarchart.ts

Рабочий код с chart.js 2.6.0:

  public barChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true,
        scales: {
      xAxes: [{
        offset: true,
        gridLines: {
          offsetGridLines: false
        }
      }]
    }
  }

Результаты в виде гистограммы, как я хочу (только столбцы все еще могут быть центрированы между линиями сетки): введите описание изображения здесь

В текущей версии Chart.js (я сейчас использую 2.9.3) полосы расположены справа и слева от линий сетки: введите описание изображения здесь

Предлагает ли новая версия chart.js возможность центрировать полосы между линиями сетки?


javascript angular charts chart.js ng2-charts
person Christian Wunder    schedule 22.05.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Сначала вам нужно определить categoryPercentage: 1 для обоих наборов данных.

public barChartData:any[] = [
  {
    data: [55, 60, 75, 82, 56, 62, 80], 
    label: 'Company A',
    categoryPercentage: 1,
  },
  { data: [58, 55, 60, 79, 66, 57, 90], 
    label: 'Company B',
    categoryPercentage: 1,
  }
];

categoryPercentage (по умолчанию 0,8): процент (0- 1) доступной ширины каждая категория должна находиться в пределах ширины выборки. подробнее ...

Chart.js, однако, по-прежнему не будет правильно размещать полосы, если некоторые из них не находятся в видимой области. Поэтому вам также необходимо убедиться, что все столбцы отображаются на диаграмме, указав соответствующее значение для _ 4_.

yAxes: [{
  ticks: {
    min: 50
  }
}]

Взгляните на свой измененный код в следующем StackBlitz

person uminder    schedule 22.05.2020
comment
Спасибо за ответ :). Думаю, вопрос был задан не очень хорошо. Что меня беспокоит, так это то, что в текущей версии полосы отображаются справа и слева от линии сетки. Но я хочу, чтобы полосы между линиями сетки отображались в течение одного года, а метка года отображалась под соответствующей линией сетки. Так же, как показано на первом скриншоте. - person Christian Wunder; 26.05.2020