Фоновые полосы и специальные метки в Vega Lite

1 - Я пытаюсь создать диаграмму, которая отображает 4 раздела на основе значений на каждой оси (-x,-y)(-x,y)(-y,x)(xy), есть ли способ установить отдельный фон цвет для каждой секции? 2 - есть ли способ добавить постоянную метку к определенным точкам данных (текстовая функция, я думаю)

Пробовал текстовую функцию, но не уверен насчет фона

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

David Bacci 31.12.2022 19:57

@DavidBacci спасибо за ответ, вот ссылка на json github.com/GeorgeRobbin/GeorgeRobbin.github.io/blob/main/…. я обновил исходный пост с изображением желаемой диаграммы.

user20901436 01.01.2023 10:36
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
2
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "config": {"background": "white", "view": {"stroke": "transparent"}},
  "data": {
    "url": "https://raw.githubusercontent.com/GeorgeRobbin/GeorgeRobbin.github.io/main/Chart2_HPI%3AMR.csv",
    "format": {"type": "csv"}
  },
  "encoding": {
    "x": {
      "field": "Mortgage Rate Annual % Change",
      "scale": {"zero": false},
      "type": "quantitative",
      "axis": {"grid": false},
      "title": "Mortgage Rate Annual % Change"
    },
    "y": {
      "field": "House Price Annual % Change",
      "scale": {"zero": false},
      "type": "quantitative",
      "axis": {"grid": false},
      "title": "House Price Annual % Change"
    },
    "tooltip": [{"field": "Date", "type": "temporal", "title": "Name"}]
  },
  "layer": [
    {
      "mark": {"type": "rect"},
      "data": {
        "values": [
          {"x": 0, "y": 0, "x2": -29.9, "y2": -15, "c": "#cfdaef"},
          {"x": -29.9, "y": 0, "x2": 0, "y2": 20, "c": "#ffe9b7"},
          {"x": 0, "y": 0, "x2": 90, "y2": -15, "c": "#dbebd2"},
          {"x": 0, "y": 0, "x2": 90, "y2": 20, "c": "#facfb7"}
        ]
      },
      "encoding": {
        "x": {"field": "x"},
        "y": {"field": "y"},
        "x2": {"field": "x2"},
        "y2": {"field": "y2"},
        "color": {"field": "c", "scale": null}
      }
    },
    {"mark": {"type": "circle", "color": "red", "opacity": 0.7}},
    {
      "mark": {"type": "text"},
      "transform": [
        {
          "filter": {
            "field": "Date",
            "oneOf": [
              {"year": 2022, "month": "jan", "date": 4},
              {"year": 2009, "month": "jan", "date": 3}
            ]
          }
        }
      ],
      "encoding": {"text": {"field": "Date", "type": "temporal"}}
    }
  ],
  "height": 300,
  "width": 500
}

Я пытаюсь построить аналогичную диаграмму, однако ось X является временной, а не количественной. Я следовал методу, но не могу заставить его работать. [Ссылка на jSON] github.com/GeorgeRobbin/GeorgeRobbin.github.io/blob/main/…

user20901436 02.01.2023 22:32

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

David Bacci 02.01.2023 22:38

Другие вопросы по теме