0

我正在尝试使用 Vega 替换使用 Google Charts API 生成的一些图表。

这是一个包含 5 列的简单条形图,我之前的 x 轴标签显示了实际数字。

在此处输入图像描述

当我尝试使用 Vega 执行此操作时,它会将重复的数字合并到一列中。

在此处输入图像描述

这是用于 vega 版本的 json(它或多或少是快速入门示例的剪切和粘贴,数据值已更改)。

{
    "scales": [
        {
            "range": "width", 
            "type": "ordinal", 
            "name": "x", 
            "domain": {
                "field": "data.x", 
                "data": "table"
            }
        }, 
        {
            "range": "height", 
            "name": "y", 
            "domain": {
                "field": "data.y", 
                "data": "table"
            }, 
            "nice": true
        }
    ], 
    "axes": [
        {
            "scale": "x", 
            "type": "x"
        }, 
        {
            "scale": "y", 
            "type": "y", 
            "ticks": 3
        }
    ], 
    "height": 80, 
    "padding": {
        "top": 10, 
        "bottom": 20, 
        "right": 10, 
        "left": 30
    }, 
    "width": 200, 
    "marks": [
        {
            "from": {
                "data": "table"
            }, 
            "type": "rect", 
            "properties": {
                "hover": {
                    "fill": {
                        "value": "red"
                    }
                }, 
                "update": {
                    "fill": {
                        "value": "steelblue"
                    }
                }, 
                "enter": {
                    "y": {
                        "field": "data.y", 
                        "scale": "y"
                    }, 
                    "x": {
                        "field": "data.x", 
                        "scale": "x"
                    }, 
                    "y2": {
                        "scale": "y", 
                        "value": 0
                    }, 
                    "width": {
                        "band": true, 
                        "scale": "x", 
                        "offset": -1
                    }
                }
            }
        }
    ], 
    "data": [
        {
            "values": [ 
                { "y": 7,"x": 7 }, 
                { "y": 7,"x": 7 }, 
                { "y": 7,"x": 7 }, 
                { "y": 6,"x": 6 }, 
                { "y": 0,"x": 0 }, 
                { "y": 0,"x": 0 }
            ], 
            "name": "table"
        }
    ]
}
4

1 回答 1

1

您应该确保values数组中的每个对象都具有唯一的 x 轴值。这是有道理的:否则,用户如何知道每个条指的是什么?如果您希望用相应的值标记每个条,则应使用文本标记。请参阅分组条示例以获取指导。

于 2016-01-08T21:36:28.563 回答