2014-02-09 60 views
1

我嘗試使用amcharts進行多行。我要使用的類型是平滑的線條(查看演示here)。我已經看到可以在這個link上繪製多個折線圖和多個數值軸。所以,我嘗試在平滑線上實現它:AmCharts平滑線串行多個Y軸不顯示

a。 2行

b。它們的尺寸都不一樣,所以我需要兩個Y軸。

問題是:只出現一個Y軸。

這是我使用javascript寫的代碼:遇到類似問題

<script type="text/javascript"> 
      var chart; 
      var graph; 
      var chartData = [ 
       {"year":"1950", "v1":0.2, "v2":-26}, 
       {"year":"1951", "v1":-0.2, "v2":-45}, 
       {"year":"1952", "v1":1, "v2":-14}, 
       {"year":"1953", "v1":0.2, "v2":6}, 
       {"year":"1954", "v1":-0.5, "v2":18}, 
       {"year":"1955", "v1":0.8, "v2":-8}, 
       {"year":"1956", "v1":-0.4, "v2":-35}, 
       {"year":"1957", "v1":-0.4, "v2":-37}, 
       {"year":"1958", "v1":-0.2, "v2":27}, 
       {"year":"1959", "v1":1.3, "v2":-14}, 
       {"year":"1960", "v1":1, "v2":8}, 
       {"year":"1961", "v1":0, "v2":-6}, 
       {"year":"1962", "v1":0.4, "v2":9}, 
       {"year":"1963", "v1":-0.3, "v2":-38}, 
       {"year":"1964", "v1":0.7, "v2":-3}, 
       {"year":"1965", "v1":0, "v2":-10}, 
       {"year":"1966", "v1":0.7, "v2":-48}, 
       {"year":"1967", "v1":0.2, "v2":22}, 
       {"year":"1968", "v1":1.1, "v2":-22}, 
       {"year":"1969", "v1":-0.2, "v2":-49}, 
       {"year":"1970", "v1":1.5, "v2":-2}, 
       {"year":"1971", "v1":-0.3, "v2":-37}, 
       {"year":"1972", "v1":1, "v2":-44}, 
       {"year":"1973", "v1":-0.4, "v2":18}, 
       {"year":"1974", "v1":1.2, "v2":-17}, 
       {"year":"1975", "v1":-0.3, "v2":-33}, 
       {"year":"1976", "v1":0.6, "v2":-45}, 
       {"year":"1977", "v1":-0.2, "v2":2}, 
       {"year":"1978", "v1":0.5, "v2":18}, 
       {"year":"1979", "v1":-0.3, "v2":-24}, 
       {"year":"1980", "v1":0.5, "v2":14}, 
       {"year":"1981", "v1":-0.5, "v2":-28}, 
       {"year":"1982", "v1":0.7, "v2":-6}, 
       {"year":"1983", "v1":1.1, "v2":-1}, 
       {"year":"1984", "v1":0.9, "v2":-26}, 
       {"year":"1985", "v1":0.8, "v2":0}, 
       {"year":"1986", "v1":1.5, "v2":-27}, 
       {"year":"1987", "v1":1.4, "v2":26}, 
       {"year":"1988", "v1":-0.5, "v2":26}, 
       {"year":"1989", "v1":0.8, "v2":-45}, 
       {"year":"1990", "v1":0.3, "v2":-23}, 
       {"year":"1991", "v1":1.2, "v2":-21}, 
       {"year":"1992", "v1":-0.2, "v2":-31}, 
       {"year":"1993", "v1":0.8, "v2":-12}, 
       {"year":"1994", "v1":0.3, "v2":-35}, 
       {"year":"1995", "v1":1.1, "v2":-1}, 
       {"year":"1996", "v1":0.9, "v2":-14}, 
       {"year":"1997", "v1":-0.1, "v2":11}, 
       {"year":"1998", "v1":1.1, "v2":-29}, 
       {"year":"1999", "v1":-0.2, "v2":11}, 
       {"year":"2000", "v1":-0.4, "v2":-18}, 
       {"year":"2001", "v1":0.6, "v2":-12}, 
       {"year":"2002", "v1":1.5, "v2":-3}, 
       {"year":"2003", "v1":0.6, "v2":-47}, 
       {"year":"2004", "v1":1.5, "v2":-43}, 
       {"year":"2005", "v1":0.1, "v2":-18}, 
       {"year":"2006", "v1":0, "v2":7}, 
       {"year":"2007", "v1":0.5, "v2":-25}, 
       {"year":"2008", "v1":1.5, "v2":-50}, 
       {"year":"2009", "v1":0.4, "v2":28}, 
       {"year":"2010", "v1":0.7, "v2":25}, 
       {"year":"2011", "v1":0.4, "v2":-16}, 
       {"year":"2012", "v1":-0.2, "v2":5}, 
       {"year":"2013", "v1":0.2, "v2":-17}, 
       {"year":"2014", "v1":-0.5, "v2":-22} 
      ]; 

      AmCharts.ready(function() { 
       // SERIAL CHART 
       chart = new AmCharts.AmSerialChart(); 
       chart.pathToImages = "../amcharts/images/"; 
       chart.dataProvider = chartData; 
       chart.marginLeft = 10; 
       chart.categoryField = "year"; 
       chart.dataDateFormat = "YYYY"; 
       chart.addListener("dataUpdated", zoomChart); 

       // AXES 
       // category 
       var categoryAxis = chart.categoryAxis; 
       categoryAxis.parseDates = true; 
       categoryAxis.minPeriod = "YYYY"; 
       categoryAxis.dashLength = 3; 
       categoryAxis.minorGridEnabled = true; 
       categoryAxis.minorGridAlpha = 0.1; 

       // value 
       var valueAxis = new AmCharts.ValueAxis(); 
       valueAxis.id = "ax1"; 
       valueAxis.axisAlpha = 0; 
       valueAxis.inside = true; 
       valueAxis.dashLength = 3; 
       valueAxis.position = "right"; 
       chart.addValueAxis(valueAxis); 

       var valueAxis2 = new AmCharts.ValueAxis(); 
       valueAxis2.id = "ax2"; 
       valueAxis2.axisAlpha = 0; 
       valueAxis2.inside = true; 
       valueAxis2.dashLength = 3; 
       valueAxis2.baseValue = -20; 
       valueAxis2.position = "left"; 
       chart.addValueAxis(valueAxis2); 

       // GRAPH 
       graph = new AmCharts.AmGraph(); 
       graph.valueaxis = "ax1"; 
       graph.type = "smoothedLine"; 
       graph.lineColor = "#d1655d"; 
       graph.negativeLineColor = "#637bb6"; 
       graph.bullet = "square"; 
       graph.bulletSize = 8; 
       graph.bulletBorderColor = "#FFFFFF"; 
       graph.bulletBorderAlpha = 1; 
       graph.bulletBorderThickness = 2; 
       graph.lineThickness = 2; 
       graph.valueField = "v1"; 
       graph.title = "title v1"; 
       graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>"; 
       chart.addGraph(graph); 

       graph2 = new AmCharts.AmGraph(); 
       graph2.valueaxis = "ax2"; 
       graph2.type = "smoothedLine"; 
       graph2.lineColor = "#d1655d"; 
       graph2.negativeLineColor = "#637bb6"; 
       graph2.bullet = "round"; 
       graph2.bulletSize = 8; 
       graph2.bulletBorderColor = "#FFFFFF"; 
       graph2.bulletBorderAlpha = 1; 
       graph2.bulletBorderThickness = 2; 
       graph2.lineThickness = 2; 
       graph2.valueField = "v2"; 
       graph2.title = "title v2"; 
       graph2.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>"; 
       chart.addGraph(graph2); 

       // CURSOR 
       var chartCursor = new AmCharts.ChartCursor(); 
       chartCursor.cursorAlpha = 0; 
       chartCursor.cursorPosition = "mouse"; 
       chartCursor.categoryBalloonDateFormat = "YYYY"; 
       chart.addChartCursor(chartCursor); 

       // SCROLLBAR 
       var chartScrollbar = new AmCharts.ChartScrollbar(); 
       chart.addChartScrollbar(chartScrollbar); 

       chart.creditsPosition = "bottom-right"; 

       // WRITE 
       chart.write("chartdiv"); 
      }); 

有人嗎?如何克服這一點?

回答

3

這一切都非常簡單,你有一個錯字:

graph.valueaxis應該graph.valueAxis