用户:MilkyDefer/QR

概览

从理论上，下述代码可以改造成支持点阵图输出：

<graph>{
    "name": "QR Code",
    "height": 300,
    "width": 300,
    "padding": "0",

    "marks": [
        {
            "type": "symbol",
            "properties": {
                "enter": {
                    "shape": { "value": "square" },
                    "fill": { "field": "g", "scale": "c" },
                    "x": { "field": "cx" },
                    "y": { "field": "cy" },
                    "size": { "field": "cs" }
                }
            },
            "from": {
                "data": "content",
                "transform": [
                    {
                        "field": "cx",
                        "type": "formula",
                        "expr": "300 / datum.s * datum.x"
                    },
                    {
                        "field": "cy",
                        "type": "formula",
                        "expr": "300 / datum.s * datum.y"
                    },
                    {
                        "field": "cs",
                        "type": "formula",
                        "expr": "(300 / datum.s) * (300 / datum.s)"
                    }
                ]
            }
        }
    ],

    "scales": [
        {
            "name": "c",
            "type": "ordinal",
            "domain": [0,1],
            "range": [
                "#FFFFFF",
                "#000000"
            ]
        }
    ],
    "data": [
        {
            "name": "content",
            "values": [
                {"s": 2, "x": 0, "y": 0, "g": 1},
                {"s": 2, "x": 0, "y": 1, "g": 0},
                {"s": 2, "x": 1, "y": 0, "g": 0},
                {"s": 2, "x": 1, "y": 1, "g": 1}
            ]
        }
    ]
}</graph>

效果如下：

优点

相比于现有的利用表格配CSS绘制点阵图的方法而言，使用Graph插件最大的优点便是，这是一张图。右键点击是可以保存的。

缺点

浏览器需要更高的支持（HTML5 Canvas）、展开后的代码可能更长、Graph插件可能存在bug。