- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有以下代码:
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"width": 700,
"height": 100,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"category": "MOYENNE","position": 0,"value": 91},
{"category": "MOYENNE","position": 1,"value": 9}
]
}
],
"scales": [
{
"name": "yscale",
"type": "band",
"domain": {"data": "table","field": "category"},
"range": "height"
},
{
"name": "xscale",
"type": "linear",
"domain": {"data": "table","field": "value"},
"range": "width",
"round": true,
"zero": true,
"nice": true
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "table","field": "position"},
"range": ["#C8E6C9", "#FF8A65"]
}
],
"axes": [
{
"orient": "left",
"scale": "yscale",
"tickSize": 0,
"labelPadding": 4,
"zindex": 1
}
],
"marks": [
{
"type": "group",
"from": {
"facet": {
"data": "table",
"name": "facet",
"groupby": "category"
}
},
"encode": {
"enter": {"y": {"scale": "yscale","field": "category"}}
},
"signals": [{"name": "height","update": "bandwidth('yscale')"}],
"scales": [
{
"name": "pos",
"type": "band",
"range": "height",
"domain": {"data": "facet","field": "position"}
}
],
"marks": [
{
"name": "bars",
"from": {"data": "facet"},
"type": "rect",
"encode": {
"enter": {
"y": {"scale": "pos","field": "position"},
"height": {"scale": "pos","band": 1},
"x": {"scale": "xscale","field": "value"},
"x2": {"scale": "xscale","value": 0},
"fill": {"scale": "color","field": "position"}
}
}
},
{
"type": "text",
"from": {"data": "bars"},
"encode": {
"enter": {
"x": {"field": "x2","offset": 15},
"y": {
"field": "y",
"offset": {"field": "height","mult": 0.5}
},
"fill": {"value": "black"},
"align": {"value": "right"},
"baseline": {"value": "middle"},
"text": {"field": "datum.value"}
}
}
}
]
}
]
}
我只想在标签中添加 % 以获得 91% 和 9%。
我认为这是在最后一行:“text”:{“field”:“datum.value”},但我不能只执行以下操作:“text”:{“field”:“datum.value”} value"+ "%"} 或类似的东西...
有人可以帮我吗?预先非常感谢您:)
最佳答案
我不完全确定这是最佳实践,但它确实有效并且基于 format
的 Vega 表达式文档.
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"width": 700,
"height": 100,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"category": "MOYENNE","position": 0,"value": 91},
{"category": "MOYENNE","position": 1,"value": 9}
],
"transform": [
{
"type": "formula",
"expr": "format(datum.value/100,'0.0p')",
"as": "percentvalue"
}
]
}
],
"scales": [
{
"name": "yscale",
"type": "band",
"domain": {"data": "table","field": "category"},
"range": "height"
},
{
"name": "xscale",
"type": "linear",
"domain": {"data": "table","field": "value"},
"range": "width",
"round": true,
"zero": true,
"nice": true
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "table","field": "position"},
"range": ["#C8E6C9", "#FF8A65"]
}
],
"axes": [
{
"orient": "left",
"scale": "yscale",
"tickSize": 0,
"labelPadding": 4,
"zindex": 1
}
],
"marks": [
{
"type": "group",
"from": {
"facet": {
"data": "table",
"name": "facet",
"groupby": "category"
}
},
"encode": {
"enter": {"y": {"scale": "yscale","field": "category"}}
},
"signals": [{"name": "height","update": "bandwidth('yscale')"}],
"scales": [
{
"name": "pos",
"type": "band",
"range": "height",
"domain": {"data": "facet","field": "position"}
}
],
"marks": [
{
"name": "bars",
"from": {"data": "facet"},
"type": "rect",
"encode": {
"enter": {
"y": {"scale": "pos","field": "position"},
"height": {"scale": "pos","band": 1},
"x": {"scale": "xscale","field": "value"},
"x2": {"scale": "xscale","value": 0},
"fill": {"scale": "color","field": "position"}
}
}
},
{
"type": "text",
"from": {"data": "bars"},
"encode": {
"enter": {
"x": {"field": "x2","offset": 15},
"y": {
"field": "y",
"offset": {"field": "height","mult": 0.5}
},
"fill": {"value": "black"},
"align": {"value": "right"},
"baseline": {"value": "middle"},
"text": {"field": "datum.percentvalue"}
}
}
}
]
}
]
}
关于javascript - 如何在Vega中的标签中添加像 "%"这样的符号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44826222/
我正在尝试在 vega 中绘制/链接两个图,更具体地说是一个节点链接图和几个散点图。根据拖动如何处理节点链接图中的信号,我确实走得很远,但还不够... 为了简单起见,我将在此处仅使用两个散点图提供一些
我有一个 Vega 规范,需要修改工具提示: Vega Chart Editor - Donut Chart 如何从此工具提示中删除“startAngle”和“endAngle”? 我也可以只添加一个
下面是可行的,但是好像不太对 (see live demo) : vg.parse.spec(spec, function(chart) { var view = chart({ el:
在 Vega 中,我有多个数据源,有时我想将它们一个接一个地合并在一起。例如,给定源 A、B 和 C,有两列 - date 和 value,我可能想创建一个包含 date< 列的组合数据源、value
我有一系列转换,它们不是 Vega-Lite 解析器的“ friend ”。有没有办法获得比以下更好/更详细的错误消息: 具体来说:消息Ignoring an invalid transform 确实
我的数据包含 3 列 - 日期、类别和值。该类别是我想扩展的一个短字符串代码,例如“r”=>“常规”,“n”=>“禁止”等,并显示正确的图例字符串。有没有办法让映射 {"r":"regular", "
我尝试实现类似于 https://vimeo.com/177767802 中所示的动画(2 点 30 分) 我的代码如下: { "data": { "values": [ {"
我的数据包含 3 列 - 日期、类别和值。该类别是我想扩展的一个短字符串代码,例如“r”=>“常规”,“n”=>“禁止”等,并显示正确的图例字符串。有没有办法让映射 {"r":"regular", "
我尝试实现类似于 https://vimeo.com/177767802 中所示的动画(2 点 30 分) 我的代码如下: { "data": { "values": [ {"
我有一个时间序列图(简单的折线图),我想在图中添加一条或多条引用线,以表示边界(类似于 SPC 图表,最小值、最大值和平均值)。 这在 Vega-Lite 中可能吗? 谢谢。 我的图表的链接: EGV
Vega/Vega Lite 图周围有一个微弱的灰色边框......是否可以通过配置参数删除它,或者我是否需要渲染为 SVG 并使用 CSS 来执行此操作? 最佳答案 您可以覆盖默认的单元格样式 "c
我正在尝试创建 binomial distribution PMF 的直方图使用 vega js 规范。 这通常是如何完成的? vega expressions不包括用于选择或阶乘的函数,也不包括 s
我正在尝试创建一个饼图,其中弧按大小(顺时针)排序,但不知道如何排序。 看来“theta”中的“sort”参数指向“color”的默认顺序,例如: { "$schema": "https://ve
就像这个: https://www.r-graph-gallery.com/265-grouped-boxplot-with-ggplot2/ 我尝试了刻面、颜色 channel 和构图, 但结果并不
我试图在折线图中显示一些数据。但是,我的“Harvest_Year”数据(以年为单位的日期,如 2017 年或 2018 年)显示为我认为是一个字符串 我从 .csv 文件导入数据,以下是我将字符串更
VegaLite 自动分配颜色。金价是蓝色,银价是橙色,感觉不对。 如何指定显式颜色 - #F1C40F黄金和 #95A5A6为了银? 我也想保留data.values如下面的示例代码 - 作为一组单
我正在 Vega-Lite(使用 Altair 生成)中绘制条形图。使用 Vega-View API,我编写了一些代码,用户可以在其中选择条形,这会更改这些条形的颜色(以及在应用程序的其他地方做一些其
我想注册一个自定义 Multi-Hue Sequential Color Scheme在织女星精简版。 我对文档的阅读是我只能创建 config.range对象来设置自定义色阶,但无法公开插值函数,从
最近几天我一直在尝试重命名我的 vega-lite 图表上的图例标签。 通常,这些标签与其各自的数据字段名称匹配。我有一个案例,我想给它们一个更具描述性的名称,但不重命名原始数据名称。 一个简化的例子
如何在 VegaLite 中使用数组数据? 我想将数据用作数组 dates = [1, 2, 3] prices1 = [1, 2, 1] prices2 = [1.5, 1, 2] 代替 Veg
我是一名优秀的程序员,十分优秀!