Адаптивные графики в реальном времени в WordPress: последние штрихи

В этой заключительной части серии, посвященной графикам в реальном времени в WordPress, я собираюсь вникнуть в суть стиля ваших графов Flot. Я терпеть не мог идею вручить тебе уродливого ребенка! У меня просто не было этого во мне.

Итак, мы рассмотрим, как получить максимальную отдачу от инструментов Flot, и углубимся в то, как придать вашим диаграммам Flot марку и выглядеть именно так, как вы этого хотите.

Отказ от ответственности: Есть миллион вещей, отличающихся от вашего сайта WordPress по сравнению с моим. Возможно, вы захотите проверить внешний вид ваших диаграмм Flot на тестовом сервере, потому что все, что вам нужно, это одна забытая точка с запятой, и диаграммы исчезнут. Итак, начните с резервного копирования вашей системы, как только она заработает — внесите некоторые изменения — сделайте резервную копию и т. Д.

С этим небольшим наставлением, ясно заявленным, давайте перейдем к забавным вещам!

Флотская библиотека

Инструменты Flot довольно надежны. Вы можете изменить практически каждый элемент графиков и диаграмм. Таким образом, если у вас есть четко определенный бренд с определенным набором цветов и форм, вы сможете сделать свои диаграммы и графики выглядящими безупречно.

Flot разбивает каждый ряд данных, поэтому каждый из них можно индивидуально контролировать с точки зрения цветов и форм. Вы можете изменить цвет фона, использовать градиенты и указать, где должна отображаться легенда, если она вообще есть. Даже сами линии сетки могут быть настроены. Итак, давайте подробно рассмотрим некоторые из этих функций, чтобы вы могли убедиться сами.

Серия данных

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

• Метка: строка. Поместите нужную метку для ряда данных в кавычки
• Линии: у них есть несколько атрибутов. Начните с открытой скобки и закончите с закрывающей скобкой, как CSS.
  • show: boolean (true / false) — если вы хотите, чтобы линии отображались между точками, установите для этого параметра значение true, false, если вы хотите скрыть линии
  • lineWidth: число. Число «5», например, равно 5px. Без кавычек.
  • fill: boolean (true / false)
  • fillColor: строка. Может быть hex или RGB или даже RGBA. Используйте кавычки: «# f000»
• Очки: имеют несколько атрибутов
  • Радиус: число. Число «5», например, равно 5px. Без кавычек.
  • fill: boolean (true / false)
  • fillColor: строка. Может быть hex или RGB или даже RGBA. Используйте кавычки: «# f000»
• Бары: имеют несколько атрибутов
  • barWidth: число. В преобразованном времени или пикселях. Без кавычек
    • Пример 1: Данные даны по дням, поэтому barWidth: 60 * 60 * 24 * 1000. Это потому, что дата указана в метке времени Unix.
    • Пример 2: Данные, которые не в формате даты / времени, должны быть числом в пикселях = barWidth: 5, равным 5px
  • выровняйте: «влево», «вправо» или «по центру». Относительно оси X
  • горизонтальный: логическое (истина / ложь), по умолчанию ложь
  • fill: boolean (true / false)
  • fillColor: строка. Может быть hex или RGB или даже RGBA. Используйте кавычки: «# f000»

Цвета для серий и этикеток

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

Если бы у вас было три серии данных, вы бы присвоили их следующим образом:

  цвета: ["# f7941e", "# 2935A", "# 15AF5C"] 

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

Цвета сетки

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

• показать: логическое (true / false)
• цвет: цвет. Сетки. Палка с гексом, как RGB и RGBA глючат
• backgroundColor: цвет / градиент. Градиенты определяются несколькими цветами:
  • [color1, color2]
  • Вы также можете перечислить уровень непрозрачности (альфа) с отдельной группой

Форматирование легенды

Я использую документ CSS для определения нескольких элементов в своих диаграммах Flot, и легенда — это тот, который абсолютно необходим для этого. В своем документе CSS (layout.css в моих ресурсах), убедитесь, что вы включили следующее

.legend table {width: auto;}

Это позволит убедиться, что все ваши другие форматирование работает. Это ошибка во Flot, и это простое исправление.

У вас есть около 20 вариантов, которые вы можете настроить с легендой, но самое главное, что нужно заметить, это то, что формат для легенд отличается. Есть только открывающие и закрывающие скобки, но каждый атрибут разделяется только запятыми: