堆栈内存溢出
  繁体   English   中英

Vega-lite：概述中的线标记不一致+详细的响应图表

[英]Vega-lite: line mark not consistent in overview+ detailed responsive chart

 原文  2022-07-13 06:49:06  9   1    javascript/ charts/ vega-lite/ vega

问题描述

 <!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vega@5.22.1"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.2.0"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.20.8"></script> </head> <body> <div id="vis"/> <script> const spec = { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "name": "source_0", "data": { "values": [ {"Items": "3", "Items_Rate": "0.20", "Month": "Jan-21"}, {"Items": "6", "Items_Rate": "0.40", "Month": "Feb-21"}, {"Items": "2", "Items_Rate": "0.20", "Month": "Mar-21"}, {"Items": "4", "Items_Rate": "0.30", "Month": "Apr-21"}, {"Items": "8", "Items_Rate": "0.45", "Month": "May-21"}, {"Items": "9", "Items_Rate": "0.50", "Month": "Jun-21"}, {"Items": "1", "Items_Rate": "0.10", "Month": "Jul-21"}, {"Items": "5", "Items_Rate": "0.35", "Month": "Aug-21"}, {"Items": "4", "Items_Rate": "0.28", "Month": "Sep-21"}, {"Items": "7", "Items_Rate": "0.37", "Month": "Oct-21"}, {"Items": "1", "Items_Rate": "0.50", "Month": "Nov-21"}, {"Items": "4", "Items_Rate": "0.35", "Month": "Dec-21"} ] }, "vconcat": [ { "width": 850, "height": 250, "layer": [ { "mark": {"type": "bar", "size": 50, "tooltip": true}, "transform": [{"filter": {"param": "brush"}}], "encoding": { "x": { "field": "Month", "type": "ordinal", "sort": null, "scale": {"domain": {"param": "brush"}, "zero": true}, "axis": { "title": "", "labelAngle": 360, "tickSize": 20, "position": 0 } }, "y": { "field": "Items", "type": "quantitative", "axis": {"tickMinStep": 1} }, "color": { "datum": "No. of Items", "scale": {"range": ["#0065ad"]} }, "tooltip": [ {"field": "Month", "type": "nominal", "title": "Month"}, { "field": "Items", "type": "quantitative", "title": "No. of Items" } ] } }, { "mark": { "type": "line", "point": {"shape": "square", "size": "50"}, "size": "2", "tooltip": true }, "transform": [{"filter": {"param": "brush"}}], "encoding": { "x": { "field": "Month", "type": "nominal", "title": "", "sort": null, "scale": {"domain": {"param": "brush"}} }, "y": { "field": "Items_Rate", "type": "quantitative", "title": "Items", "scale": {"zero": false}, "sort": null }, "color": { "datum": "Items Rate", "scale": {"range": ["black"]}, "legend": {"symbolType": "square"} }, "tooltip": [ {"field": "Month", "type": "nominal", "title": "Month"}, { "field": "Items_Rate", "type": "quantitative", "title": "Rate" } ] } } ], "resolve": { "scale": { "y": "independent", "shape": "independent", "color": "independent", "size": "independent" } } }, { "width": "850", "height": 100, "mark": "bar", "params": [ { "name": "brush", "select": {"type": "interval", "encodings": ["x"], "translate": true} } ], "encoding": { "x": { "field": "Month", "type": "nominal", "sort": null, "axis": {"title": "", "labels": false, "ticks": false} }, "y": { "field": "Items", "type": "quantitative", "axis": { "tickCount": 3, "grid": false, "title": "", "labels": false, "ticks": false } }, "color": {"value": "#0065ad"} } } ], "config": { "axisY": {"minExtent": 40}, "legend": { "orient": "top", "layout": {"top": {"anchor": "middle"}}, "labelFont": "arial", "titleFont": "arial" } } }; vegaEmbed("#vis", spec, {mode: "vega-lite"}).then(console.log).catch(console.warn); </script> </body> </html>

也可以在 Vega lite 编辑器中查看：
https://vega.github.io/editor/#/gist/da859f07e288d51da47a309ef2718ab2/responsive_chart.json

我的疑问是，当我选择 4 个或更多图表并向前滚动时，一切正常。 但是，当我向后滚动时，折线图变得不正确。
不是最近的点创建一条线来连接新的可见点，而是最远或倒数第二个可见图形现在正在连接这些点。

如何更改代码以仅使最近的点与新点连接，而不是它们变得可见的顺序？

例如，在下面的屏幕截图中，当我向后滚动时，Sept-21 点应该加入 Aug-21 点而不是 Nov-21 点。

在此处输入图像描述 感谢您的帮助。

1 个解决方案

解决方案1
 1 已采纳  2022-07-13 10:38:44

您需要一个排序字段。 我添加了一个索引并使用了它，但你可以使用任何你喜欢的东西。

编辑

   {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "name": "source_0",
      "data": {
        "values": [
          {"Items": "3", "Items_Rate": "0.20", "Month": "Jan-21", "Index":1},
          {"Items": "6", "Items_Rate": "0.40", "Month": "Feb-21", "Index":2},
          {"Items": "2", "Items_Rate": "0.20", "Month": "Mar-21", "Index":3},
          {"Items": "4", "Items_Rate": "0.30", "Month": "Apr-21", "Index":4},
          {"Items": "8", "Items_Rate": "0.45", "Month": "May-21", "Index":5},
          {"Items": "9", "Items_Rate": "0.50", "Month": "Jun-21", "Index":6},
          {"Items": "1", "Items_Rate": "0.10", "Month": "Jul-21", "Index":7},
          {"Items": "5", "Items_Rate": "0.35", "Month": "Aug-21", "Index":8},
          {"Items": "4", "Items_Rate": "0.28", "Month": "Sep-21", "Index":9},
          {"Items": "7", "Items_Rate": "0.37", "Month": "Oct-21", "Index":10},
          {"Items": "1", "Items_Rate": "0.50", "Month": "Nov-21", "Index":11},
          {"Items": "4", "Items_Rate": "0.35", "Month": "Dec-21", "Index":12}
        ]
      },
    
      "vconcat": [
        {
          "width": 850,
          "height": 250,
          "layer": [
            {
              "mark": {"type": "bar", "size": 50, "tooltip": true},
              "transform": [{"filter": {"param": "brush"}}],
              "encoding": {
                "x": {
                  "field": "Month",
                  "type": "ordinal",
                  "sort": null,
                  "scale": {"domain": {"param": "brush"}, "zero": true},
                  "axis": {
                    "title": "",
                    "labelAngle": 360,
                    "tickSize": 20,
                    "position": 0
                  }
                },
                "y": {
                  "field": "Items",
                  "type": "quantitative",
                  "axis": {"tickMinStep": 1}
                },
                "color": {"datum": "No. of Items", "scale": {"range": ["#0065ad"]}},
                "tooltip": [
                  {"field": "Month", "type": "nominal", "title": "Month"},
                  {
                    "field": "Items",
                    "type": "quantitative",
                    "title": "No. of Items"
                  }
                ]
              }
            },
            {
              "mark": {
                "type": "line",
                "point": {"shape": "square", "size": "50"},
                "size": "2",
                "tooltip": true
              },
              "transform": [{"filter": {"param": "brush"}}],
              "encoding": {
                "x": {
                  "field": "Month",
                  "type": "nominal",
                  "title": "",
                  "sort": {"field": "Index"},
                  "scale": {"domain": {"param": "brush"}}
                },
                "y": {
                  "field": "Items_Rate",
                  "type": "quantitative",
                  "title": "Items",
                  "scale": {"zero": false},
                  "sort": null
                },
                "color": {
                  "datum": "Items Rate",
                  "scale": {"range": ["black"]},
                  "legend": {"symbolType": "square"}
                },
                "tooltip": [
                  {"field": "Month", "type": "nominal", "title": "Month"},
                  {"field": "Items_Rate", "type": "quantitative", "title": "Rate"}
                ]
              }
            }
          ],
          "resolve": {
            "scale": {
              "y": "independent",
              "shape": "independent",
              "color": "independent",
              "size": "independent"
            }
          }
        },
        {
          "width": "850",
          "height": 100,
          "mark": "bar",
          "params": [
            {
              "name": "brush",
              "select": {"type": "interval", "encodings": ["x"], "translate": true}
            }
          ],
          "encoding": {
            "x": {
              "field": "Month",
              "type": "nominal",
              "sort": null,
              "axis": {"title": "", "labels": true, "ticks": false}
            },
            "y": {
              "field": "Items",
              "type": "quantitative",
              "axis": {
                "tickCount": 3,
                "grid": false,
                "title": "",
                "labels": false,
                "ticks": false
              }
            },
            "color": {"value": "#0065ad"}
          }
        }
      ],
      "config": {
        "axisY": {"minExtent": 40},
        "legend": {
          "orient": "top",
          "layout": {"top": {"anchor": "middle"}},
          "labelFont": "arial",
          "titleFont": "arial"
        }
      }
    }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Vega-lite：折线图。 从 y 轴域线开始线标记 在Vega-Lite中的概述+细节显示上应用选择 从 Vega-lite 中的分组条形图中删除空值 Vega lite：线型标记不连续问题 使用 react-vega 和 vega-lite 获取点击标记数据 Vega-Lite中的平行坐标？ vega-lite：可调选择？ 如何使用 Vega/Vega-lite 渲染类/组织/流程/状态图/图表 Vega-lite：更改堆叠条形图中的堆叠顺序并忽略负值 将字段设置为数组中的 object，Vega-lite
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM