Question

我有一个vega-lite图表，该图表在Chrome（72.0.3626.96）中按预期显示，但在Firefox（70.0.1）中却没有显示。我已经在Vega编辑器中检查了规格。有谁知道为什么会这样吗？

以下是渲染的图表：

Firefox：

铬：

这是规格：

我们将不胜感激。

抱歉，但我不知道如何折叠此代码。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.2.1.json",
  "background": "white",
  "config": {"mark": {"tooltip": null}, "view": {"height": 300, "width": 400}},
  "datasets": {
    "data-511198e25d4dbee99248144390684caa": [

      {
        "counts": 338,
        "filter_method": "greater than",
        "grade": "9",
        "index": 3,
        "perc": 0.2669826224328594,
        "school_code": "Board",
        "threshold": "8",
        "year": 20172018,
        "year_lab": "2017/18",
        "year_lab_q": "2017"
      },
      {
        "counts": 414,
        "filter_method": "greater than",
        "grade": "9",
        "index": 4,
        "perc": 0.30689399555226093,
        "school_code": "Board",
        "threshold": "8",
        "year": 20182019,
        "year_lab": "2018/19",
        "year_lab_q": "2018"
      }
    ],
    "data-72a083843a98847e44077116c495e448": [
      {
        "counts": 49,
        "filter_method": "greater than",
        "grade": "9",
        "index": 0,
        "perc": 0.3356164383561644,
        "school_code": "KING",
        "threshold": "8",
        "year": 20142015,
        "year_lab": "2014/15",
        "year_lab_q": "2014"
      },

      {
        "counts": 62,
        "filter_method": "greater than",
        "grade": "9",
        "index": 5,
        "perc": 0.3668639053254438,
        "school_code": "MLTS",
        "threshold": "8",
        "year": 20162017,
        "year_lab": "2016/17",
        "year_lab_q": "2016"
      },
      {
        "counts": 53,
        "filter_method": "greater than",
        "grade": "9",
        "index": 6,
        "perc": 0.29608938547486036,
        "school_code": "KING",
        "threshold": "8",
        "year": 20172018,
        "year_lab": "2017/18",
        "year_lab_q": "2017"
      },
      {
        "counts": 44,
        "filter_method": "greater than",
        "grade": "9",
        "index": 7,
        "perc": 0.25882352941176473,
        "school_code": "MLTS",
        "threshold": "8",
        "year": 20172018,
        "year_lab": "2017/18",
        "year_lab_q": "2017"
      },
      {
        "counts": 53,
        "filter_method": "greater than",
        "grade": "9",
        "index": 8,
        "perc": 0.3212121212121212,
        "school_code": "KING",
        "threshold": "8",
        "year": 20182019,
        "year_lab": "2018/19",
        "year_lab_q": "2018"
      },
      {
        "counts": 61,
        "filter_method": "greater than",
        "grade": "9",
        "index": 9,
        "perc": 0.25206611570247933,
        "school_code": "MLTS",
        "threshold": "8",
        "year": 20182019,
        "year_lab": "2018/19",
        "year_lab_q": "2018"
      }
    ]
  },
  "height": 400,
  "layer": [
    {
      "data": {"name": "data-72a083843a98847e44077116c495e448"},
      "encoding": {
        "color": {
          "field": "school_code",
          "legend": {"labelFontSize": 15, "titleFontSize": 20},
          "title": null,
          "type": "nominal"
        },
        "tooltip": [
          {
            "field": "perc",
            "format": ".2%",
            "title": "percentage",
            "type": "quantitative"
          },
          {
            "field": "counts",
            "title": "number",
            "type": "quantitative"
          },
          {"field": "year_lab", "title": "school year", "type": "nominal"},
          {"field": "school_code", "title": "level", "type": "nominal"},
          {"field": "grade", "type": "nominal"},
          {"field": "filter_method", "type": "nominal"},
          {"field": "threshold", "type": "nominal"}
        ],
        "x": {
          "axis": {"format": "%Y", "tickCount": 5},
          "field": "year_lab_q",
          "scale": {"domain": ["2013.9", "2018.5"]},
          "title": "School Year (beginning)",
          "type": "temporal"
        },
        "y": {
          "axis": {"format": ".0%"},
          "field": "perc",
          "title": "Percentage",
          "type": "quantitative"
        }
      },
      "mark": {"point": true, "type": "line"},
      "selection": {
        "selector001": {
          "bind": "scales",
          "encodings": ["x", "y"],
          "type": "interval"
        }
      }
    },
    {
      "data": {"name": "data-511198e25d4dbee99248144390684caa"},
      "encoding": {
        "color": {
          "field": "school_code",
          "legend": {"labelFontSize": 15, "titleFontSize": 20},
          "scale": {"domain": ["Board"], "range": ["black"]},
          "title": null,
          "type": "nominal"
        },
        "tooltip": [
          {
            "field": "perc",
            "format": ".2%",
            "title": "percentage",
            "type": "quantitative"
          },
          {
            "field": "counts",
            "title": "number",
            "type": "quantitative"
          },
          {"field": "year_lab", "title": "school year", "type": "nominal"},
          {"field": "school_code", "title": "level", "type": "nominal"},
          {"field": "grade", "type": "nominal"},
          {"field": "filter_method", "type": "nominal"},
          {"field": "threshold", "type": "nominal"}
        ],
        "x": {"field": "year_lab_q", "type": "temporal"},
        "y": {"field": "perc", "type": "quantitative"}
      },
      "mark": {"point": true, "type": "line"}
    }
  ],
  "resolve": {"scale": {"color": "independent"}},
  "title": "A title!",
  "width": 700
}

Answer 1

似乎您的时间值在Firefox中无法正确解析（JavaScript日期解析行为的详细信息通常取决于浏览器）。您可以尝试通过将数据规范（在两个地方）更改为：来强制进行正确的解析。

"data": {
  "name": "data-72a083843a98847e44077116c495e448",
  "format": {"parse": {"year_lab_q": "date:%Y"}}
}

这应确保将年份字符串解析为年份，而不是例如Unix时间戳。

正在进行其他地点日期解析的是您的domain规范。您可以尝试将其更改为更标准的时间格式，例如

"domain": ["2013-11-01", "2018-06-01"]

Firefox和Chrome之间的Vega-lite区别

1 个答案: