如何在不调整大小的情况下调整页面大小?

时间:2012-05-28 07:58:17

标签: javascript javascript-events amcharts

如何在不调整页面大小的情况下调整页面大小?

我有一个javascript,它运行以从文本文件中获取数据,然后在Amcharts上绘制图表。问题是图表的某些轴组件在首次绘制时丢失,但在我尝试刷新时仍然缺失(F5)。

当我调整浏览器大小时,所有丢失的组件都会出现,所以我想知道调整大小是做什么的,以及如何在绘制图表之后缩小调整大小而不实际调整大小?

源码的完整html版本就在这里。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts Example</title> 
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="javascript/amcharts.js" type="text/javascript"></script>

        <script type="text/javascript">

        var chart;
            var chartData = [];



        // declaring variables
        var dataProvider;

        // this method called after all page contents are loaded
    var srcFrame;
    window.onload = function() {
        //generateChartData();
        //createChart();
        loadOuter('data.txt');
        //loadOuter('Test.txt');
        //loadCSV('data.txt');
        }

    //External content into a layer
    function loadOuter(doc) {
     srcFrame = document.getElementById("hiddenContent");
     srcFrame.src = doc;
    // workaround for missing onLoad event in IFRAME for NN6
    if (!srcFrame.onload) {

        if (srcFrame.contentDocument){
            srcContent=srcFrame.contentDocument.getElementsByTagName("BODY")[0].innerHTML;
        }
        else if (srcFrame.contentWindow){
            srcContent=srcFrame.contentWindow.document.body.innerHTML;
        }
        srcContent = srcContent.substring(5,srcContent.length-6)
        parseCSV(srcContent);
        //setTimeout("transferHTML()", 1000)
        }
}

        function parseCSV(data){ 
            //replace UNIX new lines
            data = data.replace (/\r\n/g, "\n");
            //replace MAC new lines
            data = data.replace (/\r/g, "\n");
            //split into rows
            var rows = data.split("\n");
            // create array which will hold our data:
            dataProvider = [];

            // loop through all rows
            for (var i = 0; i < rows.length; i++){
                // this line helps to skip empty rows
                if (rows[i]) {                    
                    // our columns are separated by comma
                    var column = rows[i].split(",");  

                    // column is array now 
                    // first item is date
                    var date = column[0];
                var myDate= new Date();
                var dateparse = date.split("-");
                myDate.setFullYear(dateparse[0],dateparse[1],dateparse[2]);
                //alert(myDate);
                    // second item is value of the second column
                    var value1 = column[1];
                    // third item is value of the fird column 
                    var value2 = column[2];

                    // create object which contains all these items:
            chartData.push({
                        date: myDate,
                        visits: value1,
                        hits: value2,
            });
            //var dataObject = {date:date, value1:value1, value2:value2};
                    // add object to dataProvider array
                    //dataProvider.push(dataObject);
                }
            }
            // set data provider to the chart
            chart.dataProvider = chartData;
            // this will force chart to rebuild using new data            
            chart.validateData();

        }

            // generate some random data, quite different range
            function generateChartData() {
                var firstDate = new Date();
                firstDate.setDate(firstDate.getDate() - 50);
            //alert(firstDate);
            //alert(firstDate.getDate());

                for (var i = 0; i < 50; i++) {
                    var newDate = new Date(firstDate);
                    newDate.setDate(newDate.getDate() + i);
                //alert(newDate);
                    var visits = Math.round(Math.random() * 40) + 100;
                    var hits = Math.round(Math.random() * 80) + 500;

                    chartData.push({
                        date: newDate,
                        visits: visits,
                        hits: hits,
                    });
                }
            }

            //function createChart(){
        AmCharts.ready(function () {
            //loadOuter('data.txt');
            // generate some random data first
                //generateChartData();

                // SERIAL CHART    
                chart = new AmCharts.AmSerialChart();
                chart.pathToImages = "amcharts/images/";
                chart.zoomOutButton = {
                    backgroundColor: '#000000',
                    backgroundAlpha: 0.15
                };
                chart.dataProvider = chartData;
                chart.categoryField = "date";

                // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
                chart.addListener("dataUpdated", zoomChart);

                // AXES
                // category                
                var categoryAxis = chart.categoryAxis;
                categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
                categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
                categoryAxis.dashLength = 2;
                categoryAxis.gridAlpha = 0.15;
                categoryAxis.axisColor = "#DADADA";

                // first value axis (on the left)
                var valueAxis1 = new AmCharts.ValueAxis();
                valueAxis1.axisColor = "#FF6600";
                valueAxis1.axisThickness = 2;
                valueAxis1.gridAlpha = 0;
                chart.addValueAxis(valueAxis1);

                // second value axis (on the right) 
                var valueAxis2 = new AmCharts.ValueAxis();
                valueAxis2.position = "right"; // this line makes the axis to appear on the right
                valueAxis2.axisColor = "#FCD202";
                valueAxis2.gridAlpha = 0;
                valueAxis2.axisThickness = 2;
                chart.addValueAxis(valueAxis2);

                // GRAPHS
                // first graph
                var graph1 = new AmCharts.AmGraph();
                graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
                graph1.title = "red line";
                graph1.valueField = "visits";
                graph1.bullet = "round";
                graph1.hideBulletsCount = 30;
                chart.addGraph(graph1);

                // second graph                
                var graph2 = new AmCharts.AmGraph();
                graph2.valueAxis = valueAxis2; // we have to indicate which value axis should be used
                graph2.title = "yellow line";
                graph2.valueField = "hits";
                graph2.bullet = "square";
                graph2.hideBulletsCount = 30;
                chart.addGraph(graph2);

                // CURSOR
                var chartCursor = new AmCharts.ChartCursor();
                chartCursor.cursorPosition = "mouse";
                chart.addChartCursor(chartCursor);

                // SCROLLBAR
                var chartScrollbar = new AmCharts.ChartScrollbar();
                chart.addChartScrollbar(chartScrollbar);

                // LEGEND
                var legend = new AmCharts.AmLegend();
                legend.marginLeft = 110;
                chart.addLegend(legend);

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

        // this method is called when chart is first inited as we listen for "dataUpdated" event
            function zoomChart() {
                // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
                chart.zoomToIndexes(10, 20);
            //chart.validateData();
            //createChart();
            }

</script>

<div id="outerDisplay"></div>

<iframe  id="hiddenContent" width="200" height="200" style="position:absolute;visibility:hidden;" ></iframe>
<div id="chartdiv" style="width:600px; height:400px; background-color:#FFFFFF"></div>
</body>

</html>

任何人都知道如何对其进行故障排除以使其在首次加载时显示而不必调整大小?

谢谢!

1 个答案:

答案 0 :(得分:1)

您是否尝试过调用chart.validateNow()?请参阅Amcharts reference

图表将被重新绘制,在属性更改时非常有用。