Блог

Главная - Вопросы по программированию - точечный график vega-lite с гиперссылкой в каждой точке данных не щелкает

точечный график vega-lite с гиперссылкой в каждой точке данных не щелкает

#elasticsearch #kibana #vega-lite

#elasticsearch #kibana #vega-lite

Вопрос:

Я следую этой документации по созданию href канала внутри кодировки точечного графика vega-lite.

Данные, которые я использую, взяты из индекса elasticsearch. Это мой код для графика:

 {
  $schema: https://vega.github.io/schema/vega-lite/v4.json
  data: {
    url: {
      %context%: true
      index: my_index
      body: {
        size: 10000
      }
    }
    format: {
      property: hits.hits
    }
  }
  transform: [
    {
      calculate: datum._source.price
      as: price
    }
    {
      calculate: datum._source.size
      as: size
    }
    {
      calculate: "'https://www.example.com/' datum._source.id"
      as: url
    }
  ]
  layer: [
    {
      selection: {
        grid: {
          type: interval
          bind: scales
        }
      }
      mark: {
        type: circle
        tooltip: true
      }
      encoding: {
        x: {
          field: size
          type: quantitative
        }
        y: {
          field: price
          type: quantitative
        }
        href: {
          field: url
        }
      }
    }
  ]
}

Код работает, и при наведении курсора мыши на точки рассеивания курсор мыши переключается на распознанную ссылку, однако сам щелчок не работает. почему это так? единственное отличие от документированного примера заключается в том, что данные взяты из elasticsearch , и у меня есть второй слой на графике.

Как я могу заставить гиперссылки работать?

Комментарии:

1. Ваш пример конфигурации не работает, поскольку это неправильная конфигурация JSON, но я понял ваш вариант использования и привел рабочий пример в ответах.

Ответ №1:

Чтобы включить выбор щелчка, вам необходимо указать selection оф type: single . Попробуйте щелкнуть точки в ссылке редактора или попробуйте пример ниже:

 {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Using `labelExpr` to show only initial letters of month names.",
  "data": {"url": "data/seattle-weather.csv"},
  "mark": "circle",
  "transform": [
    {
      "calculate": "'https://www.google.com'",
      "as": "url"
    }
  ],
  "selection": {"select": {"type": "single"}},
  "encoding": {
    "href": {"field": "url"},
    "x": {
      "timeUnit": "month",
      "field": "date",
      "axis": {"labelAlign": "left", "labelExpr": "datum.label[0]"}
    },
    "y": {"aggregate": "mean", "field": "precipitation"}
  }
}