更改折线图中线条的颜色 vegalite

【问题标题】：change the color of the lines in the line chart vegalite更改折线图中线条的颜色 vegalite
【发布时间】：2020-08-06 17:42:47
【问题描述】：

我想更改折线图中线条的颜色。目前它们被设置为自动的。两条线代表两个不同的数据点。我的代码：

vegalite({
  width: 600,
  heigth: 800,
  data: { values: MeanAp },
  mark: {
    type: "line",
    interpolate: "natural"
  },
  encoding: {
    x: {
      timeUnit: "month",
      field: "month_mean",
      type: "temporal",
      title: "Month"
    },
    y: {
      aggregate: "sum",
      type: "quantitative",
      field: "amount"
    },
    color: {
      type: "nominal",
      field: "status_mean"
    }
  }
})

下图：

【问题讨论】：

标签： d3.js line linechart vega-lite vega

【解决方案1】：

您可以通过定义自定义比例范围或设置配色方案来更改线条的颜色。

例如，您可以像这样手动设置颜色范围，使用任何有效的 HTML 颜色名称或十六进制代码：

color: {
  type: "nominal",
  field: "status_mean"
  scale: {
    range: ["green", "blue"]
  }
}

或者，您可以使用预定义的Vega color schemes 之一：

color: {
  type: "nominal",
  field: "status_mean"
  scale: {
    scheme: "accent"
  }
}

可以在 Vega-Lite 的 Scale Range 文档中找到可用颜色选项的完整说明。

【讨论】：