Question

我是vegalite的新手，并且我已使用构面创建了此图表。问题是我想使图表变灰，只在滑块中的指定年份应用颜色范围？但这以相反的方式工作，即指定年份为黑色，而其余年份具有正确的配色方案？感谢您的帮助。谢谢Viz here

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple grid of bar charts to compare performance data.",
  "background": "#e6f4fd",
  "data": {
   "url": "https://raw.githubusercontent.com/sookyee/FIT3179/main/TheTimesRanking.json"
  },
   "transform": [
    {

      "filter": "(datum.university_name === 'Harvard University' || datum.university_name ==='Massachusetts Institute of Technology' || datum.university_name ==='Stanford University' || datum.university_name ==='California Institute of Technology' || datum.university_name ==='University of Cambridge' || datum.university_name ==='Princeton University') "

    }
  ],
   "selection": {
    "Yr": {
      "type": "single",
      "fields": ["year"],
      "bind": {
        "year": {"input": "range", "min": 2011, "max": 2015, "step": 1}
      }
    }
   },
  "width": 200,
  "height": {"step": 8},
  "spacing": 60,
  "mark": "bar",
  "encoding": {
    "y": {"field": "research", "type": "quantitative", "title": "Research"},
    "x": {
      "field": "university_name",
      "type": "ordinal",
      "title": null
    },
    "color": {
      "field": "teaching",
      "type": "quantitative",
      "legend": {"orient": "bottom", "titleOrient": "left"},
      "title": "Teaching quality (%)",
      "scale": { "scheme": "lighttealblue"},
      "condition": {"selection": "Yr", "field": "year", "type": "ordinal"} 
    },
    "column": {"field": "year", "title": "Year", "header": {"labelAngle": 0}}
  }

}

Answer 1

您的颜色条件当前显示为“除非选择了值，否则用teaching进行着色，然后使用year进行着色”。您想说的是“除非选择了值，否则将颜色设置为浅灰色，然后按teaching进行着色”。就图表规格而言，它看起来像这样：

    "color": {
      "value": "lightgray",
      "condition": {
        "selection": "Yr",
        "field": "teaching",
        "legend": {"orient": "bottom", "titleOrient": "left"},
        "scale": {"scheme": "lighttealblue"},
        "title": "Teaching quality (%)",
        "type": "ordinal"
      }
    },

在编辑器here中查看完整的图表。

当滑块滑动到指定年份时如何禁用配色方案并启用配色方案？

1 个答案: