0

我正在尝试使用 xCharts 将文本标签添加到某些数据点。对于每个具有“名称”属性的点，我希望在该点附近有一个标签，其中“名称”值作为文本。这张照片显示了我想要的：

xChart 示例

这是数据集：

var data = {
  "xScale": "time",
  "yScale": "linear",
  "type": "line",
  "main": [{
    "className": ".pizza",
    "data": [{
      "x": "2012-11-05",
      "y": 1
    }, {
      "x": "2012-11-06",
      "y": 6
    }, {
      "x": "2012-11-07",
      "y": 13,
      "name": "Name 1"
    }, {
      "x": "2012-11-08",
      "y": -3
    }, {
      "x": "2012-11-09",
      "y": -4
    }, {
      "x": "2012-11-10",
      "y": 9,
      "name": "Name 2"
    }, {
      "x": "2012-11-11",
      "y": 6
    }]
  }]
};

据我了解，这种自定义在 xCharts 中不支持开箱即用，必须使用 d3 来完成，我猜测它与有关Custom Vis Types的文档中描述的内容一致。但我是 d3 的新手，所以我不知道如何创建有用的东西。

4

1 回答 1

1

有多少绘图库建立在上面d3？

我在那里研究了文档，这是我能想到的最好的：

var lineDot = xChart.getVis('line-dotted');
var myVis = {
  enter: function(self, storage, className, data) {
    lineDot.enter.apply(this, arguments);
    // Do your custom actions here
    self._g.append('g')
      .selectAll('.myText')
      .data(data[0].data)
      .enter()
      .append('text')
      .attr('x', function(d,i){
        return self.xScale(d.x);
      })
      .attr('y', function(d,i){
        return self.yScale(d.y);
      })
      .text(function(d,i){
        return d.name;
      })
  },
  update: function(self, storage, timing) {
    lineDot.update.apply(this, arguments);
    // Do your custom actions here
  },
  exit: function(self, storage, timing) {
    lineDot.exit.apply(this, arguments);
    // Do your custom actions here
  },
  destroy: function(self, storage, timing) {
    lineDot.destroy.apply(this, arguments);
    // Do your custom actions here
  },
};
xChart.setVis('myvis', myVis);

请注意，我只编码了输入。您可能也应该处理更新案例。

这里的例子。

于 2015-02-20T16:54:51.727 回答