Узорные заливки

Обзор

В свойствах примитива везде, где можно использовать color, stroke или fill, доступен набор SVG-узоров для заливки. Они основаны на работе Ирэн Рос (Irene Ros).

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

1. Стандартные узоры: заранее определённые монохромные узоры, подходящие как отправная точка для многих визуализаций данных.
2. Динамические варианты: пользовательская функция выражений для создания вариантов стандартных узоров с заданным цветом рисунка и/или фона.

Стандартные узоры

Чтобы обратиться к стандартному узору, используйте следующий синтаксис:

url(#[pattern name])

Например, узор diagonal-stripe-1 задаётся так:

url(#diagonal-stripe-1)

Вместо цветной заливки столбчатой диаграммы из раздела форматирования значений можно использовать узор:

{
  "data": { "name": "dataset" },
  "mark": {
    "type": "bar",
    "fill": "url(#diagonal-stripe-1)"
  },
  "encoding": {
    "y": {
      "field": "Country",
      "type": "nominal"
    },
    "x": {
      "field": "$ Sales",
      "type": "quantitative"
    }
  }
}

Вместо сплошной заливки получится такой визуал:

Добавим stroke, чтобы обозначить границу примитива:

{
  "data": { "name": "dataset" },
  "mark": {
    "type": "bar",
    "fill": "url(#diagonal-stripe-1)",
    "stroke": "black"
  },
  "encoding": {
    "y": {
      "field": "Country",
      "type": "nominal"
    },
    "x": {
      "field": "$ Sales",
      "type": "quantitative"
    }
  }
}

Фон

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

{
  "data": { "name": "dataset" },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "fill": "white"
      }
    },
    {
      "mark": {
        "type": "bar",
        "fill": "url(#diagonal-stripe-1)",
        "stroke": "black"
      }
    }
  ],
  "encoding": {
    "y": {
      "field": "Country",
      "type": "nominal"
    },
    "x": {
      "field": "$ Sales",
      "type": "quantitative"
    }
  }
}

Изменение интенсивности

К имени стандартного узора можно добавить суффикс, уменьшающий интенсивность рисунка: вместо black (#000000) используется более мягкий цвет. Доступны значения от 10 до 90 с шагом 10, а также значения первого и третьего квартилей — 25 и 75.

Например, чтобы уменьшить интенсивность рисунка до 30%, используйте url(#diagonal-stripe-1-30):

{
  "data": { "name": "dataset" },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "fill": "white"
      }
    },
    {
      "mark": {
        "type": "bar",
        "fill": "url(#diagonal-stripe-1-30)",
        "stroke": "black"
      }
    }
  ],
  "encoding": {
    "y": {
      "field": "Country",
      "type": "nominal"
    },
    "x": {
      "field": "$ Sales",
      "type": "quantitative"
    }
  }
}

Доступные узоры

Следующий отчёт Power BI показывает все заранее определённые узоры и их идентификаторы для SVG URL.

• Наведите указатель на узор: в подсказке его идентификатор отображается крупнее, также показан SVG URL для применения узора.
• Срез внизу страницы позволяет посмотреть узоры с выбранной интенсивностью и соответствующий идентификатор SVG URL.

Динамические варианты

Для цветных узоров Deneb предоставляет функцию выражений. Она динамически создаёт вариант стандартного SVG-узора, добавляет его определение в DOM визуала и при необходимости использует его повторно.

Функция выражений pbiPatternSVG

В выражении Vega или Vega-Lite функция имеет следующий синтаксис:

pbiPatternSVG(pattern, foreground, background)

Параметры:

• pattern — один из идентификаторов стандартных узоров, описанных выше, в одинарных кавычках.
  • Символ #, используемый в SVG URL, здесь не нужен.
  • Если идентификатор неизвестен или недопустим, заливка не применяется.
• foreground — допустимое имя цвета CSS или шестнадцатеричное значение в одинарных кавычках.
  • Если foreground не задан или равен null, Deneb использует цвет стандартного узора — black.
  • Значение transparent допустимо и фактически скрывает рисунок узора.
  • foreground переопределяет модификатор интенсивности, если он задан в pattern.
• background — допустимое имя цвета CSS или шестнадцатеричное значение в одинарных кавычках.
  • Если параметр не задан, фон созданного узора будет прозрачным.

Простой пример: свойства примитива

Чтобы задать собственные цвета рисунка и фона, вызовите pbiPatternSVG в выражении:

{
  "data": { "name": "dataset" },
  "mark": {
    "type": "bar",
    "fill": {
      "expr": "pbiPatternSVG('diagonal-stripe-3', '#DA9A0F', '#333333')"
    },
    "stroke": "black"
  },
  "encoding": {
    "y": {
      "field": "Country",
      "type": "nominal"
    },
    "x": {
      "field": "$ Sales",
      "type": "quantitative"
    }
  }
}