Question

我正在更新工作中的一些代码，但遇到了一个问题，在amcharts3上，x轴的标签不是数据绑定的对象。就像图表数据绑定到日期一样，但是在标签中显示了另一个值（该值在数据集中），并且找不到在amcharts4上执行此操作的方法。

我尝试创建另一个x轴，但是数据看起来不正确。

它应该是x轴，显示数据集中的一个值，但仅显示该轴应该绑定到数据集中的另一个值。如果有道理。

Answer 1

这是一个amCharts v3示例，使用labelFunction将数据绑定到在轴上写出的内容（礼貌xorspark）：

https://codepen.io/team/amcharts/pen/74df55e029228d9a1867b65f351ca48f

对于v4，您可以在AxisLabel上使用Adapter。 DateAxis轴标签的一个棘手的部分是，它们的dataItem没有绑定到原始图表或序列的DataItem上，以便您可以访问其余数据（例如，通过dataItem.dataContext["field name here"]）。因此，当适配器尝试为其日期轴text提供AxisLabel时，如果该标签具有Date，则必须将所说的AxisLabel与每个数据对象进行比较查看其Date和您的数据日期（如果是字符串，将其转换为Date）是否匹配。如果是这样，则从您要“绑定”到该数据的字段中拉出。

相关代码（假设日期的数据字段为"date"）

function dataToDate(dateStr) {
  return chart.dateFormatter.parse(dateStr);
}
function sameDates(date1, date2) {
  return date1.getTime() === date2.getTime();
}
function matchAxisDateToData(axisLabel) {
  var length = chart.data.length;
  for (var i = 0; i < length; ++i) {
    // there are more axis labels than we see, and some of them will return undefined for their date
    if (axisLabel.dataItem.dates.date && sameDates(axisLabel.dataItem.dates.date, dataToDate(chart.data[i].date))) {
      return chart.data[i].timeOfDay;
    }
  }
  return false;
}
dateAxis.renderer.labels.template.adapter.add("text", function(text, axisLabel) {
  var dataText;
  if (axisLabel.dataItem.dates.date) {
    dataText = matchAxisDateToData(axisLabel);
  }
  // if there's a match, return that, otherwise return the default "text"
  return dataText || text;
});

以下是上述示例：

https://codepen.io/team/amcharts/pen/eb455855b460998f4e4282a0216a9443

有没有办法更改轴标签？

1 个答案: