针对单个x轴点的多个y轴值

Question

我在我的一个网络应用程序中实现了AMCharts JS库，但我遇到了问题。现在我需要将多个y轴值添加到一个单独的x轴点（实际上是一个日期）。我有5个值5,1,5,4,1,3，它们包含相同的x轴点（相同的日期），但是当我观察图形时，有时4个缺失，而有时5个如图所示。我真的做错了吗？这是数据的形式

{date: "2016-03-29", value: 5}
{date: "2016-03-29", value: 1}
{date: "2016-03-29", value: 5}
{date: "2016-03-29", value: 4}
{date: "2016-03-29", value: 1}
{date: "2016-03-29", value: 3}
{date: "2016-10-20", value: 0}
{date: "2016-10-20", value: 0}
{date: "2016-10-20", value: 0}

Answer 1

您的设置存在一些问题。

首先，对于启用了parseDates的图表，您的数据结构不正确。您不能拥有相同日期的多个元素。如果数据点共享相同的日期/类别，AmCharts要求您对数据点进行分组。这是设计的，网站上的每个例子都显示了这一点，因此您的所有2016-03-29和2016-10-20点都可以缩减为两个对象。我假设这些多个值对应于不同的图形对象，因此每个都需要唯一的值字段，即

[{
  date: "2016-03-29",
  value1: 5,
  value2: 1,
  value3: 5,
  value4: 4,
  value5: 1,
  value6: 3
}, {
  date: "2016-10-20"
  value1: 0,
  value2: 0,
  value3: 0
}]

然后你有6个图形对象，其valueFields设置为value1到value6以适应这些点。再说一遍，我假设您的数据集有多个图表。

修改的

您的评论表明情况并非如此，它们都属于一个图表。您仍然需要重新构建数据并提供唯一的时间戳，因为您无法为启用了parseDates的图表创建具有相同时间戳的多个条目。如果这些值在不同时间进入，则提供该信息。例如，假设您的数据是每小时：

{date: "2016-03-29 01:00", value: 5}
{date: "2016-03-29 02:00", value: 1}
{date: "2016-03-29 03:00", value: 5}
{date: "2016-03-29 04:00", value: 4}
{date: "2016-03-29 05:00", value: 1}
{date: "2016-03-29 06:00", value: 3}
{date: "2016-10-20 01:00", value: 0}
{date: "2016-10-20 02:00", value: 0}
{date: "2016-10-20 03:00", value: 0}

这样可行，但您必须将dataDateFormat设置为与时间戳匹配（在本例中为"YYYY-MM-DD JJ:NN"）并调整minPeriod以适应您的点之间的最小间隔（对于此示例："hh"）。

如果您不解析日期，那么您可以保留您的设置，但图表看起来很奇怪，有多个2016-03-29条目。这些是你唯一的选择。

对于显示多个值轴，值轴需要与图形关联。如果需要多个值轴，则需要多个图形。需要将每个图表的valueAxis属性分配给valueAxis对象或valueAxis id。您不能将多个值轴分配给一个图形对象。您可以在this example中查看其工作原理。

如果您只有一个图形并且需要显示第二个值轴，请创建一个重复的图形实例并禁用它的视觉方面，如下所示：

  valueAxes: [{
    "position": "left",
    "id": "v1"
  }, {
    "position": "right",
    "id": "v2"
  }],
  graphs: [{
    //initial graph
    type: "line",
    bullet: "round",
    valueField: "value"
  }, {
    //invisible duplicate graph
    //for second axis
    lineAlpha: 0,
    showBalloons: false,
    visibleInLegend: false,
    valueAxis: "v2",
    valueField: "value"
  }],

Demo