Укажите различную толщину каждого столбца в столбчатой ​​диаграмме Chart.js - PullRequest
Новая
       46

Укажите различную толщину каждого столбца в столбчатой ​​диаграмме Chart.js

0 голосов
/ 20 октября 2018

Работа над пользовательской диаграммой, которая может определять толщину стержня в столбчатой ​​или горизонтальной столбчатой ​​диаграмме на основе значения, предоставленного данными, а не предварительно установленной ширины, насколько это возможно при barThickness или barPercentage / categoryPercentage .

Цель: я могу создать горизонтальную гистограмму с данными, которые содержат значение x и thickness, где толщина становится относительной толщиной этого стержня вотношение к другим барам.

Например, этот код: 

const data = {
  labels: ['Northeast', 'Midwest', 'South', 'West'],
  datasets: [
    {
      data: [
        { x: 10, thickness: 18 },
        { x: 20, thickness: 8 },
        { x: 13, thickness: 5 },
        { x: 4, thickness: 12 }
      ],
    },
  ],
}

const context = document.querySelector('#myChart').getContext('2d')

const barChart = new Chart(context, {
    type: 'horizontalBar',
    data: data,
})

... сделает график похожим на этот:

desired result

... вместо этого:

current view

(здесь не включены ненужные варианты стиля).

Основные характеристики:

  • Тиковые метки центрированы на полосе
  • Тиковые интервалы определяются толщиной стержня
  • Прутки расположены равномерно

Как это можно сделать?

Я знаю, что могу взломать рисунок бараКонтроллеры диаграмм для указания явной ширины нарисованных прямоугольников, но это не позволяет получить столбцы, которые расположены равномерно.Вместо этого у них есть переменная ширина в пределах их категории фиксированной ширины, которая не взгляд, который я собираюсь:

bad widths

Я догадываюсь, что мне нужно расширить новую ось , но это кажется сложным.

Надеемся получить какие-либо предложения по лучшим подходам!Спасибо!

Похоже на этот вопрос без ответа .Обнаружил эти ответы в моем поиске, которые казались многообещающими, но в конечном итоге не были правильными:

1 Ответ

0 голосов
/ 29 ноября 2018

Для поддержки этой функции необходимо сделать три вещи:

  1. Использовать шкалу категорий для расчета толщины стержня пропорционально размеру оси (ширина по вертикали, высота по горизонтали)
  2. Переопределите метод #getPixelForValue() в шкале категорий, чтобы ширины категорий отражали толщину варианта, а не были однородными
  3. Измените размеры прямоугольников, нарисованных контроллером, используя значения, рассчитанные с помощьюscale

В этом пакете реализованы их как пользовательские диаграммы: https://github.com/swayable/chartjs-chart-superbar с использованием Chart.js новый график и новые оси функции настройки.

Решено (1) путем добавления поведения, подобного этому, к шкале категории: 

getBarThickness(thicknessPercentage) {
  let thickness = thicknessPercentage * this._axisSize(),
    spacing = this.options.spacing * 2

  return thickness - spacing
}

_axisSize() {
  return this.isHorizontal() ? this.width : this.height
}

(2) немного сложнее, потому что пиксель для каждого значения в шкале категории должен приниматьучитывает все различной толщины для каждого предыдущего элемента в наборе данных при расчете расстояния от края (left для горизонтаталь, или top для вертикали).В противном случае значения толщины категорий на оси не будут совпадать с толщинами стержней, а метки осей категорий не будут отцентрированы на стержнях.

Соответствующий файл для (1) и (2): https://github.com/swayable/chartjs-chart-superbar/blob/master/src/scale.thickCategory.js

(3) решается путем изменения соответствующего измерения в свойствах _view и _model элемента с использованием метода Scale#getBarThickness(), описанного выше.

Соответствующий файл для (3): https://github.com/swayable/chartjs-chart-superbar/blob/master/src/mixin.barThickness.js

Выяснили большую часть этого, прочитав исходный код для Chart.js, особенно scale.category.js и core.datasetController.js ,Также черпал вдохновение из исходного кода для Chart.smith.js .

...