使用者: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。