es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Vega-Lite: Agregando leyendas personalizadas que no se basen en el valor del campo/color automático/forma automática.

Vega-Lite: Agregando leyendas personalizadas que no se basen en el valor del campo/color automático/forma automática.

11 Jul, 2023 Programación

Estoy buscando una forma de generar leyendas personalizadas para datos de múltiples campos. Idealmente, me gustaría asignar colores estáticos a todos los campos que pueda tener (en total puede haber unos 20), y generar leyendas por color y texto arbitrario, o al menos un nombre de campo.

En el ejemplo a continuación, me gustaría que la leyenda muestre “trazo azul Serie 1 trazo rojo Serie 2″.

Estaría encantado de mostrar lo que tengo hasta el momento, pero he intentado colocar “legend” aparentemente en cualquier lugar donde pueda encajar, pero no hace nada.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"x": 1, "y": 10},
      {"x": 2, "y": 7},
      {"x2": 1, "y2": 11},
      {"x2": 2, "y2": 12}
    ]
  },
  "encoding": {"x": {"type": "quantitative"}, 
               "y": {"type": "quantitative"}},
  "layer": [
    {
      "layer": [
        {
          "mark": "line",
          "encoding": {
            "x": {"field": "x"}, 
            "y": {"field": "y"},
            "color": {"value": "azul"}
          }
        }
    },
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "x2"},
        "y": {"field": "y2"},
        "color": {"value": "rojo"}
      }
    }
  ]
    }
}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar una leyenda personalizada para datos de múltiples campos, puedes usar la propiedad legend dentro del objeto encoding de cada marca. Para codificar estáticamente todos los campos con un color, puedes establecer la propiedad color a un valor fijo para cada marca. Aquí tienes un ejemplo de cómo podrías modificar el código:

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"x": 1, "y": 10, "series": "Serie 1"},
      {"x": 2, "y": 7, "series": "Serie 1"},
      {"x": 1, "y": 11, "series": "Serie 2"},
      {"x": 2, "y": 12, "series": "Serie 2"}
    ]
  },
  "encoding": {
    "x": {"type": "quantitative"}, 
    "y": {"type": "quantitative"},
    "color": {"field": "series", "type": "nominal", "scale": {"range": ["blue", "red"]}, "legend": {"title": "Título de la leyenda"}}
  },
  "layer": [
    {
      "layer": [
        {
          "mark": "line",
          "encoding": {
            "x": {"field": "x", "type": "quantitative"}, 
            "y": {"field": "y", "type": "quantitative"},
            "color": {"value": "blue"}
          }
        },
        {
          "mark": "line",
          "encoding": {
            "x": {"field": "x", "type": "quantitative"},
            "y": {"field": "y", "type": "quantitative"},
            "color": {"value": "red"}
          }
        }
      ]
    }
  ]
}

    En este ejemplo, se ha agregado un campo series a los datos con dos posibles valores: “Serie 1” y “Serie 2”. Este campo se utiliza en la propiedad color del objeto encoding para cada marca, con un rango y título de leyenda personalizados. Ten en cuenta que la propiedad color se establece en "nominal" para indicar que es una variable categórica.

    El título de la leyenda se puede personalizar con la propiedad title dentro del objeto legend. Texto arbitrario se puede agregar a la leyenda modificando los valores de series en los datos.

    El código modificado debería generar una leyenda con el formato deseado.

Comments are closed.