Amcharts 需要默认为列而不是条形

Question

我正在使用 Amcharts 生成图表。

<script type="text/javascript"
src="/My-portlet/js/amcharts.js"></script>
<script type="text/javascript"
src="/My-portlet/js/raphael.js"></script>

我定义了数据并能够生成图表。但是最后有两个select选项bar和column

<script type="text/javascript">`
var chart;
var chartData = [   {
        year : '<liferay-ui:message key="Estimates.date1"/>',
            '<liferay-ui:message key="name.cpp" />' : '<liferay-ui:message key="Bar1.cpp"/>',
            '<liferay-ui:message key="name.oas" />' : '<liferay-ui:message key="Bar1.oas"/>',
            '<liferay-ui:message key="name.bb" />' : '<liferay-ui:message key="Bar1.bb"/>',
            '<liferay-ui:message key="name.psp" />' : '<liferay-ui:message key="Bar1.psp"/>',
            '<liferay-ui:message key="name.pcp" />' : '<liferay-ui:message key="Bar1.pcp"/>'
        },
        {
            year : '<liferay-ui:message key="Estimates.date1"/>',
            '<liferay-ui:message key="name.cpp" />' : '<liferay-ui:message key="Bar2.cpp"/>',
            '<liferay-ui:message key="name.oas" />' : '<liferay-ui:message key="Bar2.oas"/>',
            '<liferay-ui:message key="name.bb" />' : '<liferay-ui:message key="Bar2.bb"/>',
            '<liferay-ui:message key="name.psp" />' : '<liferay-ui:message key="Bar2.psp"/>',
            '<liferay-ui:message key="name.pcp" />' : '<liferay-ui:message key="Bar2.pcp"/>'
        },
        {
            year : '<liferay-ui:message key="Estimates.date1"/>',
            '<liferay-ui:message key="name.cpp" />' : '<liferay-ui:message key="Bar3.cpp"/>',
            '<liferay-ui:message key="name.oas" />' : '<liferay-ui:message key="Bar3.oas"/>',
            '<liferay-ui:message key="name.bb" />' : '<liferay-ui:message key="Bar3.bb"/>',
            '<liferay-ui:message key="name.psp" />' : '<liferay-ui:message key="Bar3.psp"/>',
            '<liferay-ui:message key="name.pcp" />' : '<liferay-ui:message key="Bar3.pcp"/>'
        } ];

    window.onload = function() {
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "year";
    chart.columnWidth = 0.8;
    chart.marginLeft = 100;
    chart.marginTop = 40;
    chart.plotAreaBorderAlpha = 0.0;
    chart.rotate = true;

    /*window.onload = function() {
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "year";
    chart.marginLeft = 47;
    chart.marginTop = 30;
    chart.plotAreaBorderAlpha = 0.2;
    chart.rotate = true; */

    var graph = new AmCharts.AmGraph();
    graph.title = '<liferay-ui:message key="name.cpp" />';
    //graph.labelText="[[value]]";
    graph.valueField = '<liferay-ui:message key="name.cpp" />';
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 1;
    graph.lineColor = "#A0522D";
    chart.addGraph(graph);

    var graph = new AmCharts.AmGraph();
    graph.title = '<liferay-ui:message key="name.oas" />';
    //graph.labelText="[[value]]";
    graph.valueField = '<liferay-ui:message key="name.oas" />';
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 1;
    graph.lineColor = "#32CD32";
    chart.addGraph(graph);

    var graph = new AmCharts.AmGraph();
    graph.title = '<liferay-ui:message key="name.bb" />';
    //graph.labelText="[[value]]";
    graph.valueField = '<liferay-ui:message key="name.bb" />';
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 1;
    graph.lineColor = "#483D8B";
    chart.addGraph(graph);

    var graph = new AmCharts.AmGraph();
    graph.title = '<liferay-ui:message key="name.psp" />';
    //graph.labelText="[[value]]";
    graph.valueField = '<liferay-ui:message key="name.psp" />';
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 1;
    graph.lineColor = "#F4E23B";
    chart.addGraph(graph);

    var graph = new AmCharts.AmGraph();
    graph.title = '<liferay-ui:message key="name.pcp" />';
    //graph.labelText="[[value]]";
    graph.valueField = '<liferay-ui:message key="name.pcp" />';
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 1;
    graph.lineColor = "#006400";
    chart.addGraph(graph);

    var valAxis = new AmCharts.ValueAxis();
    valAxis.stackType = "regular";
    valAxis.gridAlpha = 0.1;
    valAxis.axisAlpha = 0;
    chart.addValueAxis(valAxis);

    var catAxis = chart.categoryAxis;
    catAxis.gridAlpha = 0.1;
    catAxis.axisAlpha = 0;
    catAxis.gridPosition = "start";

    var legend = new AmCharts.AmLegend();
    legend.reversedOrder = true;
    legend.position = "right";
    legend.borderAlpha = 0.2;
    legend.horizontalGap = 10;
    legend.switchType = "v";
    chart.addLegend(legend);

    chart.write("chartdiv");
}

选项定义如下

 function setType() {
    if (document.getElementById("rb1").checked) {
        chart.rotate = true;
    } else {
        chart.rotate = false;
    }
    chart.validateNow();
}

身体

 <body style="background-color: #EEEEEE">
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
<input type="radio" checked="true" name="group" id="rb1" onclick="setType()">
bars
<input type="radio" name="group" id="rb2" onclick="setType()"> columns
  </body>

默认值总是以条形图出现。我想要它的另一种方式列。 如何更改我的 javascript ???

Answer 1

我找到了解决方案。去掉这行就可以了。

chart.rotate = true;