0

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

我有一个 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>

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

4

1 回答 1

1

你试过打电话chart.validateNow()吗?请参阅Amcharts 参考资料

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

于 2012-08-08T12:57:45.817 回答