Как создать пользовательскую легенду с помощью Vega-Lite (комбинированная линия и символ)

Я новичок в Vega-Lite и пытаюсь выполнить запрос на создание довольно необычного отчета, по существу объединяющего 3 типа диаграмм (столбец с накоплением, столбец с кластерами и линия на 2-й оси Y). Пока я получил большую часть желаемого макета: макет

Я хотел знать, есть ли способ создать пользовательскую легенду (и цвета), чтобы она выглядела примерно так:

пользовательская легенда

Если поможет, вот ссылка на код/дату https://vega.github.io/editor/#/url/vega-lite/N4IgJghgLhIFygG4QDYFcCmBneBtUAsgPYB2UAFvAIwA0IAwkSkQE7wgBC6GIdAyqmzUADMP6CsAAgAyATXgBOMSAAqEFgHMMURQFY6ANSZoAtjzg BmUQF8ahUhWp1GzNnBABxFhgwleIARQhOF0ANmVA7Bl5OAAOUTo1TW14WPjDYzNqACYbOxBiMko4bOcmVnYuTH9InDgqK3EgqTlqAHZlJK0deqUM9Cy4ABZdYVt7IvhShnK3T29fGol4cIiJa JXQ-VV1bpX0kCMB8ypcsfzCx0sy10ruJeaphID11vrRxN2U+q3+03MhnkJlcLDcKu4vD4-E1gm0Pi9mht6qJOl8elQqM8jv8ckCCg5ikMwXMqjwYXUDrUkZjtl1vqdlNjBqNzsDCcT2 JDFuTUs8qW9Vp9kj1QuE-oMGWMALq2EAAdwAlmAQc9yBgFRpyD0rMoUBAAJ4YNz4EAkCCDAIAQWkAFE+P4TOoANbwUBQfUAB3MIAARup-AAPADyADMQ1hvsosAqAF4nZQAY1m7AAxLEqAm2rEhiBZb4k2AFSQ NK6QAHSyGFRgUGB2JdKHR3V72KxC2aUP4IAGFXVQHqfdXLcWgvAxrL9RWqzX2LV-E3vQBHNAQMgKmBQBWIHiypO3BAgSvV2vuFwVRue70kIgmIuoXPWcam83evjWu0bOiOlgu-fz9h+tg6G DMMIx6ABaDE6GjOMRDoXdwRAFMqAwNIMF0XM6HzIg2xLfdy33Q9p3ces5wvFsWDbO86C7HtS37Qdh3MMc6AnAip2PBEolac9m3cJcVw3ddNzJEAaLqEg0BQFAd2TNij3YU9AJAP93CvG923vR8zQtF RLQAJQ8G0VAdZ1SxU31-SA0Nw3pWgQGg+M4NkxDkNQ9C8xIAsi1w0B8NAQiOJInjvVbW8O2o7texAeiUCHDQRzgZiQFY-z2PYOkdGC9h+

Любая помощь будет принята с благодарностью!

Вы можете использовать технику, которую я описываю здесь: stackoverflow.com/questions/75758542/…

David Bacci 03.04.2023 13:46

спасибо @DavidBacci. Я попытался воспроизвести это решение, но, честно говоря, я обнаружил, что преобразование складывания слишком усложняет вещи (все еще очень новое для вега-лайта). Пожалуйста, не могли бы вы рассмотреть это снова?

Deston 04.04.2023 13:25
Стоит ли изучать 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
3
85
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вам не нужно преобразование fold - просто явное значение столбца для ссылки. например

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "Month": 1,
        "Color": "Blue",
        "Sales": 100,
        "Sales LY": 90,
        "Target": 95,
        "Volume": 300
      },
      {
        "Month": 1,
        "Color": "Green",
        "Sales": 560,
        "Sales LY": 800,
        "Target": 880,
        "Volume": 1200
      },
      {
        "Month": 2,
        "Color": "Blue",
        "Sales": 130,
        "Sales LY": 170,
        "Target": 190,
        "Volume": 450
      },
      {
        "Month": 2,
        "Color": "Green",
        "Sales": 600,
        "Sales LY": 665,
        "Target": 680,
        "Volume": 1200
      },
      {
        "Month": 3,
        "Color": "Blue",
        "Sales": 200,
        "Sales LY": 150,
        "Target": 165,
        "Volume": 400
      },
      {
        "Month": 3,
        "Color": "Green",
        "Sales": 750,
        "Sales LY": 1000,
        "Target": 1100,
        "Volume": 1200
      },
      {
        "Month": 4,
        "Color": "Blue",
        "Sales": 80,
        "Sales LY": 105,
        "Target": 120,
        "Volume": 500
      },
      {
        "Month": 4,
        "Color": "Green",
        "Sales": 800,
        "Sales LY": 600,
        "Target": 660,
        "Volume": 1200
      }
    ]
  },
  "transform": [{"calculate": "'Volume'", "as": "Volume Legend"}],
  "width": 300,
  "height": 300,
  "layer": [
    {
      "name": "SALES",
      "mark": {"type": "bar", "xOffset": 0, "size": 10, "color": "#81c784"},
      "encoding": {
        "x": {"field": "Month", "type": "ordinal", "axis": {"labelAngle": 0}},
        "y": {"field": "Sales", "type": "quantitative"},
        "color": {"field": "Color", "type": "nominal"}
      }
    },
    {
      "name": "SALES LY",
      "mark": {"type": "bar", "xOffset": -11, "size": 10, "color": "#1e88e5"},
      "encoding": {
        "x": {"field": "Month", "type": "ordinal", "axis": {"labelAngle": 0}},
        "y": {"field": "Sales LY", "type": "quantitative", "axis": null},
        "color": {"field": "Color", "type": "nominal"}
      }
    },
    {
      "name": "TARGET",
      "mark": {"type": "bar", "xOffset": 11, "size": 10, "color": "#1e88e5"},
      "encoding": {
        "x": {"field": "Month", "type": "ordinal", "axis": {"labelAngle": 0}},
        "y": {"field": "Target", "type": "quantitative", "axis": null}
      }
    },
    {
      "name": "VOLUME",
      "mark": {"type": "line"},
      "encoding": {
        "x": {"field": "Month", "type": "ordinal"},
        "y": {"aggregate": "sum", "field": "Volume", "type": "quantitative"},
        "stroke": {
          "field": "Volume Legend",
          "scale": {"range": ["green"]},
          "legend": {"title": "",}
        }
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}}
}

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