Question

我一直在尝试构建一个将amChart与extjs 2.3集成的示例Web应用程序。我所要做的就是在弹出窗口中显示图表。我这样做是通过创建一个加载图表的页面，然后我在表单面板上使用autoLoad来加载页面。然后我将表单面板放在窗口中。显示页面上的文字但图表不是。

我正在使用amCharts 2.8.4和extjs 2.3

html加载图表：

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
         <link rel="stylesheet" type="text/css" href="frontend/include/lib/ext/resources/css/ext-all.css" />
        <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="frontend/include/lib/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="frontend/include/lib/ext/ext-all.js"></script>
        <link rel="stylesheet" type="text/css" href="frontend/include/lib/ext/resources/css/xtheme-gray.css" />
        <script type="text/javascript" src="frontend/public/page/displayGraphs.js"></script>
    </head>
    <body>
        <h1>Hello World!</h1>
        <div id="buttonDiv"></div>
    </body>
</html>

弹出窗口的javascript代码：

    Ext.onReady(function(){

    function displayGraph() {
        window.show();
    }

    var displayButton = new Ext.Button({
        text: 'Display Graph',
        renderTo:'buttonDiv',
        tooltip: 'View the full message and delivery statuses',
        handler : displayGraph 
    });

    var form = new Ext.form.FormPanel({
        border: false,
        buttonAlign: 'center',
        items:[]
    });

    form.add({
        cls: 'someCls',
        id: 'someId',
        autoLoad: {
            url:'graphs.jsp',
            scripts:true
        }
    //  html: '<div id="chartdiv" style="width: 100%; height: 355px;"></div>'
    })

    var window = new Ext.Window({
        id: 'graphDetailsWindow',
        title: 'View AmChart Graph',
        modal: false,
        closable: true,
        closeAction: 'hide',
        width: 800,
        height: 480,
        plain:true,
        layout: 'fit',
        items: [form]
    })
});

amChartsExample.js：

    var chart;

var chartData = [{
    country: "USA",
    visits: 3025,
    color: "#FF0F00"},
{
    country: "China",
    visits: 1882,
    color: "#FF6600"},
{
    country: "Japan",
    visits: 1809,
    color: "#FF9E01"},
{
    country: "Germany",
    visits: 1322,
    color: "#FCD202"},
{
    country: "UK",
    visits: 1122,
    color: "#F8FF01"},
{
    country: "France",
    visits: 1114,
    color: "#B0DE09"},
{
    country: "India",
    visits: 984,
    color: "#04D215"},
{
    country: "Spain",
    visits: 711,
    color: "#0D8ECF"},
{
    country: "Netherlands",
    visits: 665,
    color: "#0D52D1"},
{
    country: "Russia",
    visits: 580,
    color: "#2A0CD0"},
{
    country: "South Korea",
    visits: 443,
    color: "#8A0CCF"},
{
    country: "Canada",
    visits: 441,
    color: "#CD0D74"}];


AmCharts.ready(function() {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.autoMarginOffset = 0;
    chart.dataProvider = chartData;
    chart.categoryField = "country";
    chart.startDuration = 1;

    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.labelRotation = 45; // this line makes category values to be rotated
    categoryAxis.gridAlpha = 0;
    categoryAxis.fillAlpha = 1;
    categoryAxis.fillColor = "#FAFAFA";
    categoryAxis.gridPosition = "start";

    // value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.dashLength = 5;
    valueAxis.title = "Visitors from country";
    valueAxis.axisAlpha = 0;
    chart.addValueAxis(valueAxis);

    // GRAPH
    var graph = new AmCharts.AmGraph();
    graph.valueField = "visits";
    graph.colorField = "color";
    graph.balloonText = "[[category]]: [[value]]";
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 1;
    chart.addGraph(graph);

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

Answer 1

初始化弹出窗口后，尝试调用chart.validateNow（）。

Answer 2

我正在使用Extjs4和Extjs5的AmCharts包装器模块。

仍在测试..

https://github.com/VladimirCacicArapovic/AmChartsExtjs5

Answer 3

validateNow（）将使用新数据重绘图表，但我认为您的问题是renderTo ..您可以检查它。

在extjs窗口中显示Am图表

3 个答案: