类别指南未显示在图表Amcharts上

Question

我试图在类别轴上添加垂直参考线，以在图表上显示体育活动。 我的json文件中有一个变量，称为UNIX_TIMESTAMP（start_time），它是Unix时间戳。 我使用此字段在类别轴上显示。 这是使用我的图表代码创建的代码笔： https ://codepen.io/thomasdesaranno-r0629748/pen/jJrQgO

这是我的JSON文件的示例：

{
    "id": "NULL",
    "bg": "NULL",
    "UNIX_TIMESTAMP(start_time)": 1546603542000,
    "duration": 30,
    "sport_type": "running",
    "average_hr": 60,
    "average_speed": 30,
    "calories": 496,
    "fat_percentage_of_calories": 36,
    "food": "NULL",
    "ci": "NULL",
    "emotion": "NULL"
}

有人知道为什么我的向导不显示吗？

Answer 1

不能从dataProvider自动创建指南，但是您可以提取所需的数据并创建指南：

var data = [/* your data */]
var guides = data
  .map(i => i['UNIX_TIMESTAMP(start_time)'])
  .filter(i => i !== "NULL")
  .map(timestamp => ({
    "date": timestamp,
    "color": "#0000ff",
    "lineColor": "#0000ff",
    "lineAlpha": 1,
    "label": new Date(timestamp),
    "labelRotation": 90,
    "inside": true
  }));

现在，您可以在图表配置中设置指南：

{
  // ...
  "guides": guides,
  // ...
}

在这里，我创建了一个代码笔作为参考。

如果要使用dataLoader属性为图表加载外部数据，则可以使用dataUpdated事件生成指南并将其添加到图表中：

{
  // ...
  "listeners": [{
    "event":"dataUpdated", 
    "method": function(event) {
      event.chart.guides = event.chart.dataProvider
        .map(i => i['UNIX_TIMESTAMP(start_time)'])
        .filter(i => i !== "NULL")
        .map(timestamp => ({
          "date": timestamp,
          "color": "#0000ff",
          "lineColor": "#0000ff",
          "lineAlpha": 1,
          "label": new Date(timestamp),
          "labelRotation": 90,
          "inside": true
      }));
      event.chart.validateNow();
    }
  }],
  // ...
}

不要忘记调用chart.validateNow() ，否则该图表不会显示指南。

在这里，我为dataLoader解决方案创建了一支代码笔。

在官方文档中，您可以阅读有关指南及其配置的更多信息。