針對單個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