error finding 'document' when attempting jquery/highcharts under web.py_问答_开发者

error finding 'document' when attempting jquery/highcharts under web.py

开发者 https://www.devze.com 2023-02-23 13:50 出处：网络

Following the web.py tutorial, I created a simple site that renders a template. I then loaded the highcharts.js under /static and tried to run one of the highcharts examples that is included with the

Following the web.py tutorial, I created a simple site that renders a template.

I then loaded the highcharts.js under /static and tried to run one of the highcharts examples that is included with the distribution.

I copy/pasted the highcharts example code into my template and attempt to run it, and I receive the error error 500 and "NameError: global name 'document' is not defined"

My highcharts template is below. The below code works as a regular .html when i run it from the highcharts examples directory but it errors out with NameError: global name 'document' 开发者_如何学编程is not defined when I try and render it under web.py.

One other thing - If I remove the script containing the instructions to render chart1; and then open up my javascript console, I can access jQuery, Highcharts, and document. I'm really not sure were to turn next.

template code:

$def with (name)
<!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>Highcharts Example</title>


        <!-- 1. Add these JavaScript inclusions in the head of your page -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="/static/js/highcharts.js"></script>
        <script>
        var chart1; // globally available
        $(document).ready(function() {
              chart1 = new Highcharts.Chart({
                 chart: {
                    renderTo: 'chart-container-1',
                    defaultSeriesType: 'bar'
                 },
                 title: {
                    text: 'Fruit Consumption'
                 },
                 xAxis: {
                    categories: ['Apples', 'Bananas', 'Oranges']
                 },
                 yAxis: {
                    title: {
                       text: 'Fruit eaten'
                    }
                 },
                 series: [{
                    name: 'Jane',
                    data: [1, 0, 4]
                 }, {
                    name: 'John',
                    data: [5, 7, 3]
                 }]
              });
           });
        </script>
</head>
    <body>
        <div id="chart-container-1" style="width: 100%; height: 400px"></div>
        </body>
</html>