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

Question

我在其中一个Web应用程序中实现了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 
}] 

然后你有设置通过value6为VALUE1 valueFields 6个图形对象，以适应这些点。再次，我假设你有多个给定数据集的图。

编辑

您的评论表明，这种情况并非如此，他们都属于一个图形。您仍然需要重构数据并提供唯一的时间戳，因为您无法为具有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