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

时间:2020-08-06 17:42:47

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

我想更改折线图中的线条颜色。它们现在设置为自动。两行代表两个不同的数据点。 我的代码:

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"
    }
  }
})

下图: enter image description here

1 个答案:

答案 0 :(得分: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文档中找到可用颜色选项的完整说明。