Question

In the code below I wanted to show a time and hour on X axis. How can I show it.


      {
      "$schema": "https://vega.github.io/schema/vega/v4.json",
      "width": 600,
      "height": 200,
      "padding": 5,


      "data": [
        {
          "name": "table",
          "values":   [

            {"mtime": 1545206725000 , "systemmaxload": 1},
            {"mtime": 1545292825000 , "systemmaxload": 1},
                       {"mtime": 1545292885000 , "systemmaxload": 3},
                       {"mtime": 1545292945000 , "systemmaxload": 5},
                       {"mtime": 1545293005000 , "systemmaxload": 2},
                       {"mtime": 1545293065000 , "systemmaxload": 1},

                       {"mtime": 1545293125000 , "systemmaxload": 3},
                       {"mtime": 1545465925000 , "systemmaxload":1}
                      ]
        }
      ],

      "scales": [
        {
          "name": "x",
          "type": "utc",
          "range": "width",
          "domain": {"data": "table", "field": "mtime"}
        },
        {
          "name": "y",
          "type": "linear",
          "range": "height",
          "nice": true,
          "zero": true,
          "domain": {"data": "table", "field": "systemmaxload"}
        } 
      ],

      "axes": [
        {"orient": "bottom", "scale": "x" ,"format": "%d%m%y %H %M %a","tickCount": "day"},
        {"orient": "left", "scale": "y"}
      ] 
    }

Answer 1

将<div class="css-rs2cuv"> <button class="css-rzdbbc" type="button"> <svg viewBox="0 95 57 95" class="css-1jc5boz"> <path d="M57 142.5L9.5"></path> </svg> </button> <button class="css-10po51q " type="button">1</button> <button class="css-812ha7 " type="button">2</button> <button class="css-812ha7 " type="button">3</button> <div class="css-ufx8pa " data-comp="Flex Box">...</div> <button class="css-812ha7 " type="button">4</button> <button class="css-mnn3vx " type="button"> <svg viewBox="0 95 57 95" class="css-15yx468 "> <path d="M57 142.5L9.5 95 0 104.5l38"></path> </svg> </button> </div>更新为format。 Hours:Minutes:Seconds Weekday属性处理轴标签的重叠。

labelOverlap

下面的完整代码：

      .....
      "axes": [
               {"orient": "bottom", "scale": "x" ,"format": "%H:%M:%S %a", "labelOverlap": "parity"},
        ....
      ]
      ....

Why is the X axis not showing minutes and hours in VEGA script?

1 个答案: