Блог

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

 mark: {type: "text", radius: 70},
 

Для

 mark: {type: "text", radius: 120},
 

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

 vegaEmbed("#graph", {
  $schema: "https://vega.github.io/schema/vega-lite/v5.json",
  data: {
    values: [{
        event: "a",
        occurances: 28,
      },
      {
        event: "b",
        occurances: 3,
      },
      {
        event: "c",
        occurances: 1,
      },
      {
        event: "d",
        occurances: 3,
      },
      {
        event: "e",
        occurances: 1,
      },
      {
        event: "f",
        occurances: 10,
      },
      {
        event: "g",
        occurances: 2,
      },
      {
        event: "h",
        occurances: 1,
      },
      {
        event: "k",
        occurances: 1,
      },
    ],
  },
  layer: [{
      mark: {
        type: "arc",
        innerRadius: 50,
        outerRadius: 100
      },
    },
    {
      mark: {
        type: "text",
        radius: 70
      },
      encoding: {
        text: {
          field: "occurances",
          type: "quantitive"
        },
      },
    },
  ],
  mark: {
    type: "arc",
    innerRadius: 50,
    outerRadius: 100
  },
  encoding: {
    color: {
      field: "event",
      type: "nominal",
    },
    theta: {
      field: "occurances",
      type: "quantitative",
      stack: true,
    },
  },
}); 

 <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
<div id="graph"></div> 

Выведите всю кодировку наружу, чтобы она была общей для обоих слоев, и предоставьте fill метку text для нанесения некоторого цвета.

Обратитесь к приведенному ниже коду или ссылке редактора:

 {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"event": "a", "occurances": 28},
      {"event": "b", "occurances": 3},
      {"event": "c", "occurances": 1},
      {"event": "d", "occurances": 3},
      {"event": "e", "occurances": 1},
      {"event": "f", "occurances": 10},
      {"event": "g", "occurances": 2},
      {"event": "h", "occurances": 1},
      {"event": "k", "occurances": 1}
    ]
  },
  "encoding": {
    "color": {"field": "event", "type": "nominal"},
    "theta": {"field": "occurances", "type": "quantitative", "stack": true}
  },
  "layer": [
    {"mark": {"type": "arc", "innerRadius": 50, "outerRadius": 100}},
    {
      "mark": {"type": "text", "radius": 70, "fill": "black"},
      "encoding": {"text": {"field": "occurances", "type": "quantitative"}}
    }
  ]
}