0

これをIEで動作させるにはいくつかの問題があります。基本的に、MySQL DB からいくつかの列を取得して、この jscript コードの動的な値を生成します。Firefoxなどではうまく機能するようですが、IEではうまくいきません。構文をチェックし、余分なコンマや IE が好まない可能性のある不適切なエクストラを探し、ここで車輪を回転させました...コードは次のとおりです。

<script src="jquery-1.7.2.min.js"></script>
        <script>
            var graph;
            var xPadding = 45;
            var yPadding = 45;

            var data = { values:[

            <?php 

            include("mysqlconn.php"); 

            $result = mysql_query("SELECT DISTINCT kioskName FROM tbllogs ORDER BY kioskName ASC"); 

            while($row = mysql_fetch_array($result)) {

            $kioskname = $row['kioskName']; 

            $result1 = mysql_query("SELECT kioskName FROM tbllogs WHERE kioskName = '$kioskname'"); 

            $numrows1 = mysql_num_rows($result1); 

            if($numrows1!=0) { ?>

                { X: "<?php echo $kioskname; ?>", Y: <?php echo $numrows1; ?> },

            <?php } else { ?>

                { X: "<?php echo $kioskname; ?>", Y: 0 },

            <?php } 

            }
            ?>

            ]};

            // Returns the max Y value in our data list
            function getMaxY() {
                var max = 0;
                for(var i = 0; i < data.values.length; i ++) {
                    if(data.values[i].Y > max) {
                        max = data.values[i].Y;
                    }
                }
                max += 10 - max % 10;
                return max;
            }

            // Return the x pixel for a graph point
            function getXPixel(val) {
                return ((graph.width() - xPadding) / data.values.length) * val + (xPadding * 1.5);
            }

            // Return the y pixel for a graph point
            function getYPixel(val) {
                return graph.height() - (((graph.height() - yPadding) / getMaxY()) * val) - yPadding;
            }

            $(document).ready(function() {
                graph = $('#graph');
                var c = graph[0].getContext('2d');            

                c.lineWidth = 2;
                c.strokeStyle = '#333';
                c.font = 'italic 8pt sans-serif';
                c.textAlign = "center";

                // Draw the axises
                c.beginPath();
                c.moveTo(xPadding, 0);
                c.lineTo(xPadding, graph.height() - yPadding);
                c.lineTo(graph.width(), graph.height() - yPadding);
                c.stroke();

                // Draw the X value texts
                for(var i = 0; i < data.values.length; i ++) {
                    c.fillText(data.values[i].X, getXPixel(i), graph.height() - yPadding + 20);
                }

                // Draw the Y value texts
                c.textAlign = "right";
                c.textBaseline = "middle";

                for(var i = 0; i < getMaxY(); i += 10) {
                    c.fillText(i, xPadding - 10, getYPixel(i));
                }

                c.strokeStyle = '#f00';

                // Draw the line graph
                c.beginPath();
                c.moveTo(getXPixel(0), getYPixel(data.values[0].Y));
                for(var i = 1; i < data.values.length; i ++) {
                    c.lineTo(getXPixel(i), getYPixel(data.values[i].Y));
                }
                c.stroke();

                // Draw the dots
                c.fillStyle = '#333';

                for(var i = 0; i < data.values.length; i ++) {  
                    c.beginPath();
                    c.arc(getXPixel(i), getYPixel(data.values[i].Y), 4, 0, Math.PI * 2, true);
                    c.fill();
                }
            });
        </script>

何かご意見は？

4

1 に答える 1

0

まあ、 IE9+canvasでgetContextのみサポートされています。その場合は、代わりにラファエルを使用してください。

于 2012-07-08T07:57:49.290 に答える