AmChart没有显示第二个y轴

时间:2014-04-17 12:04:02

标签: javascript amcharts

我被分配了一个在图表中显示2个图表的任务,因此我需要两个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

1 个答案:

答案 0 :(得分:4)

图形没有属性valueAxes,而是使用valueAxis:

graph2.valueAxis = yAxis2;