Javascript 除非固定大小，否则amcharts无法加载到div中，但轴标签处于禁用状态

我一直在努力使这些图表正常工作，但无法对此做出任何决议。我正在尝试将amcharts合并到一个web应用程序中，并且能够呈现图表，但有错误。当我将div width设置为某个百分比时，除非调整浏览器窗口的大小或按F12键，否则图表不会显示。如果我将其设置为固定的px宽度，它将第一次渲染，但随后轴标签将被切断。谷歌搜索发现了一个关于图表无法在隐藏的div中呈现的问题，但我没有将div设置为隐藏，也不知道如何在javascript中呈现图表之前检查页面是否已加载

  getSecondChart: function (demoChart3) {


        var chart;
        var chartData = [{
            "year": 2009,
            "income": 23.5

        }, {
            "year": 2010,
            "income": 26.2

        }, {
            "year": 2011,
            "income": 30.1

        }, {
            "year": 2012,
            "income": 29.5

        }, {
            "year": 2013,
            "income": 30.6

        }, {
            "year": 2014,
            "income": 34.1

        }
        ];



        AmCharts.ready(function () {
            // SERIAL CHART
            var chart = new AmCharts.AmSerialChart();
            chart.dataProvider = chartData;
            chart.categoryField = "year";
            chart.startDuration = 2;
            // change balloon text color                
            chart.balloon.color = "#000000";


            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.gridPosition = "start";

            // value
            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.axisAlpha = 0;
            chart.addValueAxis(valueAxis);

            // GRAPHS
            // column graph
            var graph1 = new AmCharts.AmGraph();
            graph1.type = "column";
            graph1.title = "Income";
            graph1.lineColor = "#FF6600";
            graph1.valueField = "income";
            graph1.lineAlpha = 1;
            graph1.fillAlphas = 1;
            graph1.dashLengthField = "dashLengthColumn";
            graph1.alphaField = "alpha";
            graph1.balloonText = "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>";
            chart.addGraph(graph1);

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

---

我能够让你的例子在小提琴中工作：

amCharts在div中的布局非常灵活。我将它与twitter bootstrap结合使用，它总是调整大小以完美地适应浏览器窗口。我的猜测是，你在某个地方有一些相互冲突的CSS，它切断了包含图表的div。首先尝试删除样式表以查看其显示是否正确，然后再添加样式以查看罪魁祸首

        function HomeModule() {
        this.getSecondChart = function (demoChart3) {


            var chart;
            var chartData = [{
                "year": 2009,
                "income": 23.5

            }, {
                "year": 2010,
                "income": 26.2

            }, {
                "year": 2011,
                "income": 30.1

            }, {
                "year": 2012,
                "income": 29.5

            }, {
                "year": 2013,
                "income": 30.6

            }, {
                "year": 2014,
                "income": 34.1

            }
            ];



            AmCharts.ready(function () {
                // SERIAL CHART
                var chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                chart.categoryField = "year";
                chart.startDuration = 2;
                // change balloon text color                
                chart.balloon.color = "#000000";


                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.gridPosition = "start";

                // value
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.axisAlpha = 0;
                chart.addValueAxis(valueAxis);

                // GRAPHS
                // column graph
                var graph1 = new AmCharts.AmGraph();
                graph1.type = "column";
                graph1.title = "Income";
                graph1.lineColor = "#FF6600";
                graph1.valueField = "income";
                graph1.lineAlpha = 1;
                graph1.fillAlphas = 1;
                graph1.dashLengthField = "dashLengthColumn";
                graph1.alphaField = "alpha";
                graph1.balloonText = "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>";
                chart.addGraph(graph1);

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

    var myHomeModule = new HomeModule();

    $(document).ready(function () {
        myHomeModule.getSecondChart();
    });

函数HomeModule（）{
this.getSecondChart=函数（demoChart3）{
var图；
var图表数据=[{
“年份”：2009年，
“收入”：23.5
}, {
“年份”：2010年，
“收入”：26.2
}, {
“年份”：2011年，
“收入”：30.1
}, {
“年份”：2012年，
“收入”：29.5
}, {
“年份”：2013年，
“收入”：30.6
}, {
“年份”：2014年，
“收入”：34.1
}
];
AmCharts.ready（函数（）{
//序列图
var chart=new AmCharts.AmSerialChart（）；
chart.dataProvider=chartData；
chart.categoryField=“年”；
chart.startDuration=2；
//更改引出序号文本颜色
chart.balloon.color=“#000000”；
//斧头
//类别
var categoryAxis=chart.categoryAxis；
categoryAxis.gridPosition=“开始”；
//价值观
var valueAxis=新的AmCharts.valueAxis（）；
valueAxis.axisAlpha=0；
图表.添加valueAxis（valueAxis）；
//图表
//柱状图
var graph1=新的AmCharts.AmGraph（）；
graph1.type=“column”；
图1.title=“收入”；
graph1.lineColor=“#FF6600”；
图1.valueField=“收入”；
图1.lineAlpha=1；
图1.1-1α=1；
graph1.dashLengthField=“dashLengthColumn”；
图1.alphaField=“alpha”；
graph1.BallooText=“[[category]]中的[[title]]：[[value]][[additional]]”；
图.添加图（图1）；
//写
图表。填写（“demoChart3”）；
})
}
};
var myHomeModule=new HomeModule（）；
$（文档）.ready（函数（）{
myHomeModule.getSecondChart（）；
});

谢谢您的回复。我确实发现它与dojo库有关，我正在使用一个容器来放置购物车。我按照您的建议分解了这些步骤，需要找到一种方法，如何在该容器中呈现图表。谢谢你的帮助。

renderChart = function () {
  myhomeModule.getSecondChart("demoChart3");

}

        function HomeModule() {
        this.getSecondChart = function (demoChart3) {


            var chart;
            var chartData = [{
                "year": 2009,
                "income": 23.5

            }, {
                "year": 2010,
                "income": 26.2

            }, {
                "year": 2011,
                "income": 30.1

            }, {
                "year": 2012,
                "income": 29.5

            }, {
                "year": 2013,
                "income": 30.6

            }, {
                "year": 2014,
                "income": 34.1

            }
            ];



            AmCharts.ready(function () {
                // SERIAL CHART
                var chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                chart.categoryField = "year";
                chart.startDuration = 2;
                // change balloon text color                
                chart.balloon.color = "#000000";


                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.gridPosition = "start";

                // value
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.axisAlpha = 0;
                chart.addValueAxis(valueAxis);

                // GRAPHS
                // column graph
                var graph1 = new AmCharts.AmGraph();
                graph1.type = "column";
                graph1.title = "Income";
                graph1.lineColor = "#FF6600";
                graph1.valueField = "income";
                graph1.lineAlpha = 1;
                graph1.fillAlphas = 1;
                graph1.dashLengthField = "dashLengthColumn";
                graph1.alphaField = "alpha";
                graph1.balloonText = "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>";
                chart.addGraph(graph1);

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

    var myHomeModule = new HomeModule();

    $(document).ready(function () {
        myHomeModule.getSecondChart();
    });