1

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

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

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

4

1 回答 1

0

这是一个 amCharts v3 示例labelFunction，如您所说，它用于将数据绑定到轴上写出的内容（由xorspark提供）：

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

对于 v4，您将在AxisLabel. DateAxis 轴标签的一个棘手部分是它们dataItem不绑定到原始图表或系列' DataItem，以便您访问其余数据（例如通过dataItem.dataContext["field name here"]）。因此，当适配器尝试向其提供textDateAxisAxisLabel时，如果该标签具有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

于 2019-06-18T06:46:34.890 回答