2014-04-17 130 views
1

我已经分配了一个在图中显示两个图表的任务,因此我需要两个y轴来表示图表。 单轴将位于左侧,另一个位于右侧。AmChart没有显示第二个y轴

我的问题是只有一个y轴显示。 当我使用amCharts时,我注意到一个问题,其中可见的y轴有一个名为allLabels的数组,其中有元素,但第二个y轴没有,但我不知道 是什么填充数组属性。

代码:

function addconsumerUsageGraph(consumerUsageGraph) { 
//You can ignore this 
    if (consumerUsageGraph.graphs.length == 2) 
    { 
     var gr1 = consumerUsageGraph.graphs[0]; 
     var gr2 = consumerUsageGraph.graphs[1]; 
     consumerUsageGraph.removeGraph(gr1); 
     consumerUsageGraph.removeGraph(gr2); 
    } 

    if (consumerUsageGraph.graphs.length == 1) { 
     var gr1 = consumerUsageGraph.graphs[0]; 
     consumerUsageGraph.removeGraph(gr1); 
    } 

    //I add the two yAxis here: 
    var yAxis1 = new AmCharts.ValueAxis(); 
    yAxis1.position = "left"; 

    var yAxis2 = new AmCharts.ValueAxis(); 
    yAxis2.position = "right"; // set this to "right" if you want it on the right 

    //Adding the value axis to the whole graph 
    consumerUsageGraph.addValueAxis(yAxis1); 
    consumerUsageGraph.addValueAxis(yAxis2); 

    var graph = new AmCharts.AmGraph(); 
    graph.valueField = "value"; 
    graph.type = "column"; 
    graph.title = "Usage"; 
    graph.lineAlpha = 1; 
    graph.fillAlphas = 0.75; 

    consumerUsageGraph.addGraph(graph); 

    var graph2 = new AmCharts.AmGraph(); 
    graph2.valueField = "cost"; 
    graph2.type = "line"; 
    graph2.lineAlpha = 1; 
    graph2.title = "Cost"; 
    graph2.lineColor = graphColour; 
    graph2.bullet = "round"; 
    graph2.bulletAlpha = 0.5; 
    graph2.bulletBorderAlpha = 0.8; 

    //Assigning the second yAxis to the second graph 
    graph2.valueAxes = yAxis2; 


    consumerUsageGraph.addGraph(graph2); 

    //consumerUsageGraph.write("chartdiv"); 

    var legend = new AmCharts.AmLegend(); 
    legend.marginBottom = -10; 
    legend.useGraphSettings = true; 
    consumerUsageGraph.addLegend(legend); 
    } 

如何图表现在看起来:

enter image description here

回答

3

图形不具有财产valueAxes,使用valueAxis代替:

graph2.valueAxis = yAxis2;