Разница Vega-lite между Firefox и Chrome

У меня есть диаграмма vega-lite, которая, как и ожидалось, отображается в Chrome (72.0.3626.96), но не в Firefox (70.0.1). Я проверил спецификацию в редакторе Vega. Кто-нибудь знает, почему это может быть?

Вот визуализированные диаграммы:

Firefox:

введите здесь описание изображения

Chrome:

введите здесь описание изображения

Вот спецификация:

Любая помощь, которую вы могли бы оказать, была бы очень признательна.

Извините, но я не знаю, как свернуть этот код.

{
  "$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
}

person campo    schedule 10.12.2019    source источник


Ответы (1)


Похоже, что ваши временные значения неправильно анализируются в firefox (детали поведения парсинга даты javascript часто зависят от браузера). Вы можете попробовать принудительно выполнить правильный синтаксический анализ, изменив спецификацию данных (в обоих местах) на:

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

Это должно гарантировать, что строка года анализируется как год, а не, например, временная метка unix.

Другое место, где происходит синтаксический анализ даты, указано в вашей domain спецификации. Вы можете попробовать изменить их на более стандартный формат времени, например

"domain": ["2013-11-01", "2018-06-01"]
person jakevdp    schedule 10.12.2019