javascript - AmCharts 平滑线串行多 Y 轴未显示

Question

我尝试使用 amcharts 制作多行。我要使用的类型是平滑线(查看演示 here )。我已经看到可以在此 link 上绘制多个折线图和多个值轴.因此，我尝试使用以下方法在平滑线上实现它:

一个。 2行

它们的比例不同，所以我需要两个 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");
            });

有人遇到过类似的问题吗？如何克服这个问题？

Answer 1

一切都很简单，你打错了:

graph.valueaxis 应该是 graph.valueAxis