Начинаем работать с Chart.js: Шкалы

() translation by (you can also view the original English article)

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

Шкалы сильно изменились с версии библиотеки v1.0 и теперь они более функциональны. В этом уроке, вы узнаете как управлять шкалами и настраивать их вид, используя различные опции, предоставленные библиотекой.

Изменение линий сетки

Все параметры конфигурации для линий сетки вложены в параметр шкалы в ключе gridLines. Этот ключ определяет параметры для настройки линий сетки, которые перпендикулярны осям. Изменим линии сетки линейной диаграммы, созданные вами в уроке по линейным и столбчатым диаграммам.

Вы можете показать или скрыть линии сетки графика, используя ключ display. Его изначальное значение true, поэтому линии сетки показаны изначально. Цвет линий сетки, можно задать ключом color. Если вы хотите, чтобы линии сетки состояли из тире, вместо сплошной линии, то вы можете задать значение для длинны тире и промежутков ключом borderDash. Вы можете установить ширину и цвет линий для первого или нулевого индекса с помощью ключей zeroLineWidth и zeroLineColor соответственно.

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

Вы можете отображать или скрывать названия шкал на диаграмме с помощью ключа display. По умолчанию названия шкалы скрыты. Текст, который должен быть показан на этих шкалах, можно указать с помощью ключа labelString. Вы также можете управлять цветом шрифта, семейством, размером и стилем с помощью ключей fontColor, fontFamily, fontSize и fontStyle, соответственно.

Это та старая диаграмма скорости автомобиля с другими настройками.

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  },
  scales: {
    xAxes: [{
      gridLines: {
        display: false,
        color: "black"
      },
      scaleLabel: {
        display: true,
        labelString: "Time in Seconds",
        fontColor: "red"
      }
    }],
    yAxes: [{
      gridLines: {
        color: "black",
        borderDash: [2, 5],
      },
      scaleLabel: {
        display: true,
        labelString: "Speed in Miles per Hour",
        fontColor: "green"
      }
    }]
  }
};

Есть ещё одни ключ называемый offsetGridLines. Если установлен в true, это сдвигает надписи к середине линий сетки. Обычно это полезно при создании гистограмм.

Настройка линейных шкал

Линейные шкалы используются в графиках с числовыми данными. Эти шкалы могут быть созданы по осям X или Y. В большинстве случаев, Chart.js автоматически определяет минимум и максимум значений для шкалы. Однако, это может привести к некоторой путанице.

Скажем вы хотите нанести отметки студентов в классе. Если максимальная отметка за тест 200, но никто из студентов не набрал больше 180 баллов, максимальная отметка шкалы скорее всего будет 180. В таких случаях, те кто смотрят, на диаграмму не смогут узнать, что максимум быллов было 180 или 200.

Chart.js имеет множество встроенных опций, которыми вы можете управлять различными параметрами шкалы. Вы можете указать минимальное и максимальное значение для шкалы ключами min и max. Размер шага шкалы можно задать свойством stepSize. Таким образом, вы можете определить сколько линий сетки должно отображаться на диаграмме. Либо установить ограничение на количество линий сетки и отметок на графике, использовав ключ maxTicksLimit.

В этом коде задаются максимальные и минимальные значения шкалы для горизонтальной шкалы на столбчатой диаграмме из предыдущего урока этой серии.

var chartOptions = {
  scales: {
    yAxes: [{
      barPercentage: 0.5,
      gridLines: {
        display: false
      }
    }],
    xAxes: [{
      gridLines: {
        zeroLineColor: "black",
        zeroLineWidth: 2
      },
      ticks: {
        min: 0,
        max: 6500,
        stepSize: 1300
      },
      scaleLabel: {
        display: true,
        labelString: "Density in kg/m3"
      }
    }]
  },
  elements: {
    rectangle: {
      borderSkipped: 'left',
    }
  }
};

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

Настройка шкал радиально-линейной диаграммы

Такой тип шкалы используется для радиальной и полярной диаграмм. В отличие от обычной линейной шкалы, в такой диаграмме область диаграммы располагается поверх осей, а не располагается вдоль оси.

Есть множество ключей, специально предназначенных для радиальной шкалы. Например, вы можете использовать ключ lineArc для обозначения того, какими должны быть линии сетки — круглые или прямые. По умолчанию задано false для радиальных диаграмм и true для диаграмм с полярными областями.

Вы можете настроить внешний вид линий, которые исходят из центра диаграммы до меток точек ключом angleLines. В качестве значения принимается объект. Объекты может содержать ключи для управления цветом, шириной и градусом линий. Вы можете скрыть угловые линии задав значение display как false. Цвет и ширина угловых линий может быть настроена ключами color и lineWidth.

Внешний вид подписей кнопок задается ключом pointLabels. Так же как с угловым линиям, этот ключ принимает объект в качестве значения. Отметьте, что эти параметры имеют эффект только если значение lineArc установлено как false. Цвет текста, семейство текста и стиль могут быть заданы ключами fontColor, fontFamily, fontSize, и fontStyle.

Вы так же можете задать минимальное и максимально значения шкалы ключами min и max. Размер шага и максимальное количество отметок на шкале, задаются ключами stepSize и maxTicksLimit. Эти опции должны идти под ключем ticks. Другие ключи, допустимые в ticks это showLabelBackdrop, backdropColor, backdropPaddingX, и backDropPaddingY. Вы можете использовать их, чтобы отобразить или скрыть задний фон под надписями осей и настроить ширину, высоту и цвет.

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

var chartOptions = {
  scale: {
    gridLines: {
      color: "black",
      lineWidth: 3
    },
    angleLines: {
      display: false
    },
    ticks: {
      beginAtZero: true,
      min: 0,
      max: 100,
      stepSize: 20
    },
    pointLabels: {
      fontSize: 18,
      fontColor: "green"
    }
  },
  legend: {
    position: 'left'
  }
};

Конфигурация временной шкалы

Вы можете использовать временную шкалу, для отображения времени и даты на диаграммах. Как упомянуто в водном уроке о Chart.js, для отображения времени вам нужно включить Moment.js в ваш проект. Одно ограничение при использовании временной шкалы — она может быть отображена только по оси X. Все параметры настройки временной шкалы, располагается под time.

Чтобы создать временную шкалу, вам нужно задать значение ключа type в time в подопции xAxes. После этого, вы можете устанавливать значения для различных ключей time. Единица измерения, которая должна быть использована для отрисовки отметок, задается ключом unit.

Шаг единиц можно задать ключом unitStepSize. Формат, в котором должны отображаться подписи и отметки определяется под-опцией displayFormats. Подробнее ознакомиться с форматом строк вы можете на сайте Moment.js.

Формат времени, в котором отображаются подсказки, может быть определен ключом tooltipFormat.

Также, вы можете округлить время перед нанесением его на диаграмму ключом round. Будьте осторожны при установке значения для round. Допустим, вы установили значение как hour и есть две временные метки, которые нужно нанести на диаграмму. Если одно из них 5:30, а другое 5:50, то оба эти значения будут нанесены на отметку 5:00. Установка значения в minute расположит их соответственно на метки 5:30 и 5:50.

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

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  },
  scales: {
    xAxes: [{
      type: "time",
      time: {
        unit: 'hour',
        unitStepSize: 0.5,
        round: 'hour',
        tooltipFormat: "h:mm:ss a",
        displayFormats: {
          hour: 'MMM D, h:mm A'
        }
      }
    }],
    yAxes: [{
      gridLines: {
        color: "black",
        borderDash: [2, 5],
      },
      scaleLabel: {
        display: true,
        labelString: "Speed in Miles per Hour",
        fontColor: "green"
      }
    }]
  }
};

В заключение

Этот урок помог вам освоить разные виды шкал в Chart.js. Теперь вы можете легко настраивать шкалы в диаграммах, настраивая их цвет, минимальное и максимальное значения, количество отметок и другие показатели.

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

Если вы ищите дополнительные ресурсы для изучения или примеров использования, проверьте что у нас есть на рынке Envato. Если у вас есть вопросы, пожалуйста дайте мне знать в комментариях. Приходилось ли вам использовать эту библиотеку в своих проектах? Пожалуйста, поделитесь советами в комментариях.