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,
  // ...
}

Here我已经创建了一支数字笔作为参考。

如果您想使用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()，否则图表不会显示指南。

Here我已经为dataLoader解决方案创建了一支代码笔。

在official docs中，您可以阅读有关指南及其配置的更多信息。

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

1 个答案: