Question

我有一个非常基本的折线图（有关Vega编辑器的简化示例，请参见下文）。基本上，它绘制线条，X轴是连续日期，Y轴是一些数值。

我正在尝试为线上的某些数据点添加标签，此时Y的值为。仅针对某些数据点，因为某些图表可能超过一年，因此可能有数百天（X值）。

这就是Vega自动将标签放在X轴上的方式。如果X值过多，则不会每天显示，例如＆＃34; 1月1日＆＃34;，然后＆＃34; 1月8日＆＃34;，然后＆＃34; 1月15日＆＃34;等等（好的！）

仅供参考，使用C3（D3的图表库），我使用以下内容从每7个数据点中绘制一个标签：

data: {
  json: data.data,
  type: 'spline',
  labels: {
    format: function(v, id, i, j) {
      if ( i % 7 === 3 ) {
        return d3.format('.2f')(v);
      }
    }
    ...

不幸的是，我不知道从哪里开始。我没有找到任何这样的例子，也找不到文档中的相关内容。

仅供参考，以下是我想添加这些标签的示例图表：

{
    "$schema": "https://vega.github.io/schema/vega/v3.json",
    "width": 500,
    "height": 250,
    "autosize": {
        "type":   "fit",
        "resize": true
    },
    "data": [{
        "name": "table",
        "format": {
            "parse": {
                "date":  "date",
                "value": "number"
            }
        },
        "values": [
            { "date": "2017-09-01", "value": "12.34", "what": "one" },
            { "date": "2017-09-01", "value": "4.34",  "what": "two" },
            { "date": "2017-09-02", "value": "13.34", "what": "one" },
            { "date": "2017-09-02", "value": "13.34", "what": "two" },
            { "date": "2017-09-03", "value": "4.34",  "what": "one" },
            { "date": "2017-09-03", "value": "15.34", "what": "two" },
            { "date": "2017-09-04", "value": "15.34", "what": "one" },
            { "date": "2017-09-04", "value": "5.34",  "what": "two" },
            { "date": "2017-09-05", "value": "16.34", "what": "one" },
            { "date": "2017-09-05", "value": "6.34",  "what": "two" },
            { "date": "2017-09-06", "value": "17.34", "what": "one" },
            { "date": "2017-09-06", "value": "17.34", "what": "two" },
            { "date": "2017-09-07", "value": "18.34", "what": "one" },
            { "date": "2017-09-07", "value": "8.34",  "what": "two" },
            { "date": "2017-09-08", "value": "18.34", "what": "one" },
            { "date": "2017-09-08", "value": "14.34", "what": "two" },
            { "date": "2017-09-09", "value": "9.34",  "what": "one" },
            { "date": "2017-09-09", "value": "14.34", "what": "two" },
            { "date": "2017-09-10", "value": "20.34", "what": "one" },
            { "date": "2017-09-10", "value": "4.34",  "what": "two" }
        ]
    }],
    "scales": [{
        "name": "x",
        "type": "utc",
        "range": "width",
        "domain": {"data": "table", "field": "date"}
    }, {
        "name": "y",
        "type": "linear",
        "range": "height",
        "nice": true,
        "zero": true,
        "domain": {"data": "table", "field": "value"}
    }, {
        "name": "color",
        "type": "ordinal",
        "range": "category",
        "domain": {"data": "table", "field": "what"}
    }],
    "axes": [{
        "orient": "bottom",
        "scale": "x",
        "encode": {
            "labels": {
                "interactive": true,
                "update": {
                    "fill":     {"value": "steelblue"},
                    "angle":    {"value": 50},
                    "fontSize": {"value": 14},
                    "align":    {"value": "left"},
                    "baseline": {"value": "middle"},
                    "dx":       {"value": 3}
                },
                "hover": {
                    "fill": {"value": "firebrick"}
                }}}
    }, {
        "orient": "left",
        "scale": "y"
    }],
    "marks": [{
        "type": "group",
        "from": {
            "facet": {
                "name": "series",
                "data": "table",
                "groupby": "what"
            }
        },
        "marks": [{
            "type": "line",
            "from": {"data": "series"},
            "encode": {
                "enter": {
                    "x": {"scale": "x", "field": "date"},
                    "y": {"scale": "y", "field": "value"},
                    "stroke": {"scale": "color", "field": "what"},
                    "strokeWidth": {"value": 2}
                },
                "update": {
                    "interpolate": {"value": "monotone"},
                    "fillOpacity": {"value": 1}
                },
                "hover": {
                    "fillOpacity": {"value": 0.5}
                }
            }
        }]
    }]
}

Answer 1

Vega有一个名为tickCount的属性，可以添加到您的轴定义中。将其添加到y轴必须解决您的问题：

{
    "orient": "left",
    "scale": "y",
    "tickCount": 4
}

如果它应该是动态的，你也可以使用它。

该功能比图解功能更强大。在下面的链接中查看其他选项的文档： https://vega.github.io/vega/docs/axes/

对于某些数据点，在折线图上添加Y值作为标签

1 个答案: