文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >企业级动态JavaScript

问企业级动态JavaScript
EN

Stack Overflow用户
提问于 2012-03-15 04:54:14
回答 1查看 224关注 0票数 1

Reference Question

我正在尝试有动态的Javascript，并通过样本应用程序和tutorials。

我的示例程序如下所示，运行正常：

x.html

代码语言：javascript
复制
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>Highcharts Example</title>


                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
                <script type="text/javascript" src="myfile.php"></script>
        </head>
        <body>
                <p>If you click on me, I will disappear.</p>
                <p>If you click on me, I will disappear.</p>
                <p>Click me away!</p>
                <p>Click me too!</p>
        </body>
</html>

而myfile.php代码是：

代码语言：javascript
复制
<?php
Header("content-type: application/x-javascript");
$out="$(document).ready(function(){\n";
$out.="$(\"p\").click(function(){\n";
$out.="$(this).hide();\n";
$out.="});\n";
$out.="});\n";
echo $out;
?>

正如我在浏览器x.html文件中所提到的

我正在尝试使用相同的概念来创建HighCharts列向下钻取图表，因为我需要使HighChart数据成为动态数据，以便为图表构造动态数据。

所以我现在有了x.html文件

代码语言：javascript
复制
<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.6.2/jquery.min.js"></script>
                <script type="text/javascript" src="highcharts/js/highcharts.js"></script>
                <script type="text/javascript" src="html.php"></script>
        </head>
        <body>

                <!-- 3. Add the container -->
                <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
        </body>
</html>

现在我的html.php文件有：

html.php

代码语言：javascript
复制
<?php
Header("content-type: application/x-javascript");
$out="<script type=\"text/javascript\">\n";
$out.="var chart;\n";
$out.="$(document).ready(function() {\n";
$out.="\n";
$out.="   var colors = Highcharts.getOptions().colors,\n";
$out.="      categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],\n";
$out.="      name = 'Browser brands',\n";
$out.="      level = 0,\n";
$out.="      data = [{\n";
$out.="            y: 55.11,\n";
$out.="            color: colors[0],\n";
$out.="            drilldown: {\n";
$out.="               level: 1,\n";
$out.="               name: 'MSIE versions',\n";
$out.="               categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],\n";
$out.="               color: colors[0],\n";
$out.="               data: [{\n";
$out.="                   y: 33.06,\n";
$out.="                   drilldown: {\n";
$out.="                       level: 2,\n";
$out.="                       name: 'drilldown next next level',\n";
$out.="                       categories: ['a', 'b', 'c'],\n";
$out.="                       color: colors[0],\n";
$out.="                       data: [{\n";
$out.="                               y: 33.06,\n";
$out.="                               color: colors[0],\n";
$out.="                               drilldown: {\n";
$out.="                                       level: 3,\n";
$out.="                                       name: 'drilldown next next next level',\n";
$out.="                                       categories: ['a', 'b', 'c'],\n";
$out.="                                       data: [23,54,47],\n";
$out.="                                       color: colors[0]\n";
$out.="                                }\n";
$out.="                        },10.85, 7.35],\n";
$out.="                       }\n";
$out.="                        },2.41,7.35,10.85],\n";
$out.="                   }\n";
$out.="         }, {\n";
$out.="             y: 21.63,\n";
$out.="            color: colors[1],\n";
$out.="            drilldown: {\n";
$out.="               name: 'Firefox versions',\n";
$out.="               categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],\n";
$out.="               data: [13.52, 5.43, 1.58, 0.83, 0.20],\n";
$out.="               color: colors[1]\n";
$out.="            }\n";
$out.="         }, {\n";
$out.="            y: 11.94,\n";
$out.="            color: colors[2],\n";
$out.="            drilldown: {\n";
$out.="               name: 'Chrome versions',\n";
$out.="               categories: ['Chrome 10.0', 'Chrome 11.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 12.0',\n";
$out.="                  'Chrome 6.0', 'Chrome 5.0', 'Chrome 7.0'],\n";
$out.="               data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12],\n";
$out.="               color: colors[2]\n";
$out.="            }\n";
$out.="         }, {\n";
$out.="            y: 7.15,\n";
$out.="            color: colors[3],\n";
$out.="            drilldown: {\n";
$out.="               name: 'Safari versions',\n";
$out.="               categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',\n";
$out.="                  'Safari 3.1', 'Safari 41'],\n";
$out.="               data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],\n";
$out.="               color: colors[3]\n";
$out.="            }\n";
$out.="         }, {\n";
$out.="            y: 2.14,\n";
$out.="            color: colors[4],\n";
$out.="            drilldown: {\n";
$out.="               name: 'Opera versions',\n";
$out.="               categories: ['Opera 11.x', 'Opera 10.x', 'Opera 9.x'],\n";
$out.="               data: [1.65, 0.37, 0.12],\n";
$out.="               color: colors[4]\n";
$out.="            }\n";
$out.="         }];\n";
$out.="\n";
$out.="   function setChart(name, categories, data, color) {\n";
$out.="      chart.xAxis[0].setCategories(categories);\n";
$out.="      chart.series[0].remove();\n";
$out.="      chart.addSeries({\n";
$out.="         name: name,\n";
$out.="         data: data,\n";
$out.="         color: color || 'white'\n";
$out.="      });\n";
$out.="   }\n";
$out.="\n";
$out.="   chart = new Highcharts.Chart({\n";
$out.="      chart: {\n";
$out.="         renderTo: 'container',\n";
$out.="         type: 'column'\n";
$out.="      },\n";
$out.="      title: {\n";
$out.="         text: 'Browser market share, April, 2011'\n";
$out.="      },\n";
$out.="      subtitle: {\n";
$out.="         text: 'Click the columns to view versions. Click again to view brands.'\n";
$out.="      },\n";
$out.="      xAxis: {\n";
$out.="         categories: categories\n";
$out.="      },\n";
$out.="      yAxis: {\n";
$out.="         title: {\n";
$out.="            text: 'Total percent market share'\n";
$out.="         }\n";
$out.="      },\n";
$out.="      plotOptions: {\n";
$out.="         column: {\n";
$out.="            cursor: 'pointer',\n";
$out.="            point: {\n";
$out.="               events: {\n";
$out.="                  click: function() {\n";
$out.="\n";
$out.="                     var drilldown = this.drilldown;\n";
$out.="                     if (drilldown) { // drill down\n";
$out.="\n";
$out.="                         this.series.chart.setTitle({\n";
$out.="                             text: drilldown.name\n";
$out.="                         });\n";
$out.="\n";
$out.="                        setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);\n";
$out.="                     } else { // restore\n";
$out.="                        this.series.chart.setTitle({\n";
$out.="                                text: chart.name\n";
$out.="                         });\n";
$out.="                        setChart(name, categories, data);\n";
$out.="                     }\n";
$out.="                  }\n";
$out.="               }\n";
$out.="            },\n";
$out.="            dataLabels: {\n";
$out.="               enabled: true,\n";
$out.="               color: colors[0],\n";
$out.="               style: {\n";
$out.="                  fontWeight: 'bold'\n";
$out.="               },\n";
$out.="               formatter: function() {\n";
$out.="                  return this.y +'%';\n";
$out.="               }\n";
$out.="            }\n";
$out.="         }\n";
$out.="      },\n";
$out.="      tooltip: {\n";
$out.="         formatter: function() {\n";
$out.="            var point = this.point,\n";
$out.="               s = this.x +':<b>'+ this.y +'% market share</b><br/>';\n";
$out.="            if (point.drilldown) {\n";
$out.="               s += 'Click to view '+ point.category +' versions';\n";
$out.="            } else {\n";
$out.="               s += 'Click to return to browser brands';\n";
$out.="            }\n";
$out.="            return s;\n";
$out.="         }\n";
$out.="      },\n";
$out.="      series: [{\n";
$out.="         name: name,\n";
$out.="         data: data,\n";
$out.="         color: 'white'\n";
$out.="      }],\n";
$out.="      exporting: {\n";
$out.="         enabled: false\n";
$out.="      }\n";
$out.="   });\n";
$out.="\n";
$out.="\n";
$out.="});\n";
$out.="</script>\n";
$out.="\n";
echo $out
?>

现在在浏览器中加载x.html页面时会出现以下错误：

第一次：

代码语言：javascript
复制
syntax error:    var colors = Highcharts.getOptions().colors,

所以我把我的'var color‘移到了Jquery文档的外部，就像这样：

代码语言：javascript
复制
$out="<script type=\"text/javascript\">\n";
$out.="var chart;\n";
$out.="var colors;\n";
$out.="$(document).ready(function() {\n";
$out.="\n";
$out.="   colors = Highcharts.getOptions().colors,\n";

但是现在，当我运行x.chtml页面时，我得到：

代码语言：javascript
复制
missing } in XML expression :          }]; (Line 77)

请注意，当我将整个JS放在x.html文件中时，它工作得很好，但我很努力，不确定我的代码有什么问题，我如何才能使它工作

==================================================================================

添加原始工作HTML文件：

x.html

代码语言：javascript
复制
<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.6.2/jquery.min.js"></script>
                <script type="text/javascript" src="highcharts/js/highcharts.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
   var colors = Highcharts.getOptions().colors,
      categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
      name = 'Browser brands',
      data = [{
            y: 55.11,
            color: colors[0],
            drilldown: {
               name: 'MSIE versions',
               categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
               data: [{
                   y: 33.06,
                   drilldown: {
                       name: 'drilldown next level',
                       categories: ['a', 'b', 'c'],
                       data: [23,54,47],
                       color: colors[0]
                   }
               }, 10.85, 7.35, 2.41],
               color: colors[0]
            }
         }, {
             y: 21.63,
            color: colors[1],
            drilldown: {
               name: 'Firefox versions',
               categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
               data: [13.52, 5.43, 1.58, 0.83, 0.20],
               color: colors[1]
            }
         }, {
            y: 11.94,
            color: colors[2],
            drilldown: {
               name: 'Chrome versions',
               categories: ['Chrome 10.0', 'Chrome 11.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 12.0',
                  'Chrome 6.0', 'Chrome 5.0', 'Chrome 7.0'],
               data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12],
               color: colors[2]
            }
         }, {
            y: 7.15,
            color: colors[3],
            drilldown: {
               name: 'Safari versions',
               categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                  'Safari 3.1', 'Safari 41'],
               data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
               color: colors[3]
            }
         }, {
            y: 2.14,
            color: colors[4],
            drilldown: {
               name: 'Opera versions',
               categories: ['Opera 11.x', 'Opera 10.x', 'Opera 9.x'],
               data: [1.65, 0.37, 0.12],
               color: colors[4]
            }
         }];

   function setChart(name, categories, data, color) {
      chart.xAxis[0].setCategories(categories);
      chart.series[0].remove();
      chart.addSeries({
         name: name,
         data: data,
         color: color || 'white'
      });
   }

   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
         type: 'column'
      },
      title: {
         text: 'Browser market share, April, 2011'
      },
      subtitle: {
         text: 'Click the columns to view versions. Click again to view brands.'
      },
      xAxis: {
         categories: categories
      },
      yAxis: {
         title: {
            text: 'Total percent market share'
         }
      },
      plotOptions: {
         column: {
            cursor: 'pointer',
            point: {
               events: {
                  click: function() {

                     var drilldown = this.drilldown;
                     if (drilldown) { // drill down

                         this.series.chart.setTitle({
                             text: drilldown.name
                         });

                        setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                     } else { // restore
                        this.series.chart.setTitle({
                                text: chart.name
                         });
                        setChart(name, categories, data);
                     }
                  }
               }
            },
            dataLabels: {
               enabled: true,
               color: colors[0],
               style: {
                  fontWeight: 'bold'
               },
               formatter: function() {
                  return this.y +'%';
               }
            }
         }
      },
      tooltip: {
         formatter: function() {
            var point = this.point,
               s = this.x +':<b>'+ this.y +'% market share</b><br/>';
            if (point.drilldown) {
               s += 'Click to view '+ point.category +' versions';
            } else {
               s += 'Click to return to browser brands';
            }
            return s;
         }
      },
      series: [{
         name: name,
         data: data,
         color: 'white'
      }],
      exporting: {
         enabled: false
      }
   });


});
                </script>

        </head>
        <body>

                <!-- 3. Add the container -->
                <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>


        </body>
</html>

这个可以完全正常工作。

即使在将头文件类型更改为html之后，我也得到了相同的两个错误：

​

​

​

​

==================================================================================！！已解决！！

问题是我的html.php文件中有以下代码：

代码语言：javascript
复制
$out="<script type=\"text/javascript\">\n"; 
..................................
$out="</script>\n";

脚本再次标记我的x.html文件，以包含html.php文件中的JS脚本：

代码语言：javascript
复制
<script type="text/javascript" src="html.php"></script>

因此，x.html中的PHP转储部分类似于以下内容：

代码语言：javascript
复制
<script type="text/javascript" src="html.php">
   <script type="text/javascript">
 ....................................
   </script>
</script>

从PHP代码中删除额外的script标记对我很有帮助。它现在在最终的x.html页面中变成了这样：

代码语言：javascript
复制
<script type="text/javascript" src="html.php">
 ....................................
</script>

而且它起作用了。请让我知道这个实现是否正确

不管怎样，谢谢大家..对于您的所有回复

javascript
jquery
php
EN

回答 1

Stack Overflow用户

发布于 2012-03-15 04:58:31

问题是您的头部指定内容是javascript，但输出缓冲区包含的是HTML，而不是JavaScript。

代码语言：javascript
复制
Header("content-type: application/x-javascript");
$out="<script type=\"text/javascript\">\n";

一些浏览器可能会将其视为E4X、嵌入到JavaScript中的XML

在XML1.6中首次引入，E4X在XML语言中引入了原生JavaScript对象，并添加了用于在JavaScript代码中嵌入文本XML文档的语法。

但是HTML不是格式良好的XML。

假设您希望html.php提供包含JavaScript的超文本标记语言，请更改

代码语言：javascript
复制
Header("content-type: application/x-javascript");

至

代码语言：javascript
复制
Header("content-type: text/html");
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/9710115

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档