2016-01-04 61 views
2

我經歷了amCharts的示例和文檔。amCharts與多個數據集的股票圖表不顯示

這裏是我的問題:圖表顯示只是一條線,如在2個數據集定義不是兩個:

var chart; 

function createStockChart() { 
    chart = new AmCharts.AmStockChart(); 


    // DATASETS ////////////////////////////////////////// 

    var dataSet = new AmCharts.DataSet(); 
    chart.dataSets = [{ 
     title: "XWD.TO", 
     color: "#000000", 
     fieldMappings: [ { 
     fromField: "value", 
     toField: "value" 
     }, { 
     fromField: "volume", 
     toField: "volume" 
     } ], 
     dataProvider: chartData, 
     categoryField: "date" 
    }, 

    { 
     title: "portfolio-top-9-12-2015", 
     color: "#FF0000", 
     fieldMappings: [ { 
     fromField: "value", 
     toField: "value" 
     }, { 
     fromField: "volume", 
     toField: "volume" 
     } ], 
     dataProvider: chartData2, 
     categoryField: "date" 
    }]; 



    // PANELS /////////////////////////////////////////// 
    // first stock panel 
    var stockPanel1 = new AmCharts.StockPanel(); 
    stockPanel1.showCategoryAxis = false; 
    stockPanel1.title = "Price"; 
    stockPanel1.percentHeight = 70; 

    // graph of first stock panel 
    var graph1 = new AmCharts.StockGraph(); 
    graph1.valueField = "value"; 
    graph1.comparable = true; 
    graph1.compareField = "value"; 
    graph1.type = "smoothedLine"; 
    graph1.bullet = "round"; 
    graph1.lineThickness = 2; 
    graph1.bulletBorderColor = "#FFFFFF"; 
    graph1.bulletBorderAlpha = 1; 
    graph1.bulletBorderThickness = 3; 
    stockPanel1.addStockGraph(graph1); 

} 

對於整個頁面代碼: http://www.fanta-trade.eu/chart.php?tipo=a&code=XWD.TO&compare_top=1&time=1449658858

這就像如果代碼不提取第二個數據集。

+0

我沒有stockcharts來驗證,但它似乎你需要一個數據集選擇器。見:https://www.amcharts.com/demos/multiple-data-sets/ .hope這有助於 –

回答

3

股票圖表支持多個數據集。但是,默認情況下,它不會爲每個數據集繪製圖表。

默認情況下,它只繪製主選定數據集的圖形 - 第一個。

爲了繪製其他數據集的圖形,需要對它們進行「比較」。

可以通過在數據集選擇器(如果您啓用了一個選項)中選擇它們進行比較,或者通過將數據集的compared屬性設置爲true以編程方式進行比較。

{ 
    title: "portfolio-top-9-12-2015", 
    color: "#FF0000", 
    fieldMappings: [ { 
    fromField: "value", 
    toField: "value" 
    }, { 
    fromField: "volume", 
    toField: "volume" 
    } ], 
    dataProvider: chartData2, 
    categoryField: "date", 
    compared: true 
} 

請注意,比較圖表使用不同的外觀設置。您可以通過圖表的compareGraph設置來設置這些設置。 I.e .:

// graph of first stock panel 
var graph1 = new AmCharts.StockGraph(); 
graph1.valueField = "value"; 
graph1.comparable = true; 
graph1.compareField = "value"; 
graph1.type = "smoothedLine"; 
graph1.bullet = "round"; 
graph1.lineThickness = 2; 
graph1.bulletBorderColor = "#FFFFFF"; 
graph1.bulletBorderAlpha = 1; 
graph1.bulletBorderThickness = 3; 
graph1.compareGraph = { 
    "type": "smoothedLine", 
    "bullet": "round", 
    "lineThickness": 2, 
    "bulletBorderColor": "#FFFFFF", 
    "bulletBorderAlpha": 1, 
    "bulletBorderThickness": 3 
}; 
stockPanel1.addStockGraph(graph1); 
+0

偉大的...它的工作原理...只是沒有格式化圖,因爲它應該...例如寬度a smoothedLine – illinois

+0

用相關信息更新了我的答案。 – martynasma

+0

非常感謝,真的很有幫助 – illinois