json 天津开发区视觉面积图Power BI

vh0rcniy 于 2023-07-01 发布在其他

关注(0)|答案(1)|浏览(154)

我试着用Power BI的Deneb可视化和Vega Lite语言制作了两个面积图。

有两件事我努力去做：

1000以下的值（例如700）我想将它们显示为0.7K（当前格式似乎无法转换它们，它只对1000以上的值进行格式化）
我想突出显示两个图表的最大值（绿色）和最小值（红色）

下面是完整的代码：

{
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "area",
        "line": {"color": "#063970"},
        "color": {
          "x1": 1,
          "y1": 1,
          "gradient": "linear",
          "stops": [
            {"offset": 0, "color": "white"},
            {"offset": 1, "color": "#063970"}
          ]
        }
      }
    },
    {
      "mark": {
        "type": "area",
        "line": {"color": "#2596be"},
        "color": {
          "x1": 1,
          "y1": 1,
          "gradient": "linear",
          "stops": [
            {"offset": 0, "color": "white"},
            {"offset": 1, "color": "#2596be"}
          ]
        }
      },
      "encoding": {
        "y": {"field": "Variable 1", "type": "quantitative"}
      }
    },
    {
      "mark": {
        "type": "text",
        "yOffset": -10,
        "size": 10,
        "color": "#000000"
      },
      "encoding": {
        "text": {"field": "Variable 2", "format": ".2s"},
        "opacity": {
          "condition": {"test": {"field": "MONTH", "equal": "off"}, "value": 0.1},
          "value": 1
        },
        "y": {"field": "Variable 2", "type": "quantitative", "axis": null}
      }
    },
    
    {
      "mark": {
        "type": "text",
        "yOffset": -10,
        "size": 10,
        "color": "#000000"
      },
      "encoding": {
        "text": {"field": "Variable 1", "format": ".2s"
},
        "opacity": {
          "condition": {"test": {"field": "MONTH", "equal": "off"}, "value": 0.1},
          "value": 1
        },
        "y": {"field": "Variable 1", "type": "quantitative", "axis": null}
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "MONTH",
      "type": "ordinal",
      "axis": {"labelPadding": 0},
      "title": null
    },
    "y": {
      "field": "Variable 2",
      "type": "quantitative",
      "axis": null
    }
  }
}

JSON

来源：https://stackoverflow.com/questions/76546600/deneb-visual-area-chart-power-bi

1条答案

按热度按时间

omvjsjqw1#

给你d3format不会做你想做的事情，所以只需要使用转换和表达式来滚动你自己的格式。

{
  "data": {"name": "dataset"},
  "transform": [
    {
      "calculate": "format(datum['Leaves Count 2022']/1000,'0.1f')+'k'",
      "as": "l1"
    },
    {
      "calculate": "format(datum['Leaves Count 2023']/1000,'0.1f')+'k'",
      "as": "l2"
    },
    {
      "joinaggregate": [
        {
          "op": "max",
          "field": "Leaves Count 2022",
          "as": "l1max"
        },
        {
          "op": "max",
          "field": "Leaves Count 2023",
          "as": "l2max"
        },
        {
          "op": "min",
          "field": "Leaves Count 2022",
          "as": "l1min"
        },
        {
          "op": "min",
          "field": "Leaves Count 2023",
          "as": "l2min"
        }
      ]
    }
  ],
  "layer": [
    {
      "mark": {
        "type": "area",
        "line": {"color": "#063970"},
        "color": {
          "x1": 1,
          "y1": 1,
          "gradient": "linear",
          "stops": [
            {
              "offset": 0,
              "color": "white"
            },
            {
              "offset": 1,
              "color": "#063970"
            }
          ]
        }
      }
    },
    {
      "mark": {
        "type": "area",
        "line": {"color": "#2596be"},
        "color": {
          "x1": 1,
          "y1": 1,
          "gradient": "linear",
          "stops": [
            {
              "offset": 0,
              "color": "white"
            },
            {
              "offset": 1,
              "color": "#2596be"
            }
          ]
        }
      },
      "encoding": {
        "y": {
          "field": "Leaves Count 2022",
          "type": "quantitative"
        }
      }
    },
    {
      "mark": {
        "type": "circle",
        "size": 50,
        "fill": {
          "expr": "datum['Leaves Count 2023']==datum.l2max? 'green':datum['Leaves Count 2023']==datum.l2min?'red':'#063970'"
        },
        "stroke": "white",
        "strokeWidth": 1
      },
      "encoding": {
        "x": {
          "field": "MONTH",
          "type": "ordinal"
        },
        "y": {
          "field": "Leaves Count 2023",
          "type": "quantitative"
        }
      }
    },
    {
      "mark": {
        "type": "circle",
        "size": 50,
        "fill": {
          "expr": "datum['Leaves Count 2022']==datum.l1max? 'green':datum['Leaves Count 2022']==datum.l1min?'red':'#2596be'"
        },
        "stroke": "white",
        "strokeWidth": 1
      },
      "encoding": {
        "x": {
          "field": "MONTH",
          "type": "ordinal"
        },
        "y": {
          "field": "Leaves Count 2022",
          "type": "quantitative"
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "yOffset": -10,
        "size": 10,
        "color": "#000000"
      },
      "encoding": {
        "text": {"field": "l2"},
        "opacity": {
          "condition": {
            "test": {
              "field": "MONTH",
              "equal": "off"
            },
            "value": 0.1
          },
          "value": 1
        },
        "y": {
          "field": "Leaves Count 2023",
          "type": "quantitative",
          "axis": null
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "yOffset": -10,
        "size": 10,
        "color": "#000000"
      },
      "encoding": {
        "text": {"field": "l1"},
        "opacity": {
          "condition": {
            "test": {
              "field": "MONTH",
              "equal": "off"
            },
            "value": 0.1
          },
          "value": 1
        },
        "y": {
          "field": "Leaves Count 2022",
          "type": "quantitative",
          "axis": null
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "MONTH",
      "type": "ordinal",
      "axis": {"labelPadding": 0},
      "title": null
    },
    "y": {
      "field": "Leaves Count 2023",
      "type": "quantitative",
      "axis": null
    }
  }
}

赞(0）回复(0）举报 2023-07-01

我来回答

json 天津开发区视觉面积图Power BI

1条答案

相关问题

热门标签

最新问答