1
Reference QuestionEnternalダイナミックJavaScriptの
私は、動的Javascriptを持つようにしようとサンプルアプリとtutorialsを通して行っています。
期待通りに以下のような私のサンプルプログラムが正常に動作します。
x.html
<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コードですが：
<?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データを動的にする必要があります。
は、だから私は今私のhtml.phpファイルがあり、今
<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>
ようx.htmlファイルを持っている：
html.php
<?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ページをロードしますブラウザがエラーの下に私を与えている：
第一回：
だから私は次のようにjQueryのドキュメント準備fumction外に私の 'VAR色' を移動：
$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ページを実行すると、今私が取得：
missing } in XML expression : }]; (Line 77)
私はx.htmlファイルのように全体のJSを入れたときに、それが正常に動作しますが、私のコードの問題とどのように私はそれが
を動作させることができますいただきました！私は========必ず努力しないことに注意してください= ==========================================
x.html
<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>
この1：=======================
は、元の作業HTMLファイルを追加します完全にうまく動作します。
でもHTMLにヘッダの種類を変更した後、私は、同じ2つのエラーを取得：
を================= ========================================== =============== !!!!解決済みの解決済みの解決済み!!!!問題は、私は私のhtml.phpファイルのコードの下に持っていたということでした
：
$out="<script type=\"text/javascript\">\n";
..................................
$out="</script>\n";
、スクリプトタグ再び私x.htmlファイルhtml.phpファイルのようにJSのスクリプトを含める：
<script type="text/javascript" src="html.php"></script>
だからx.htmlでPHPによるダンプの一部は、以下のようなもののようだった：
<script type="text/javascript" src="html.php">
<script type="text/javascript">
....................................
</script>
</script>
は余分の削除しますPHPコードのcriptタグが私を助けました。これは最終的なx.htmlページで次のようになりました：
<script type="text/javascript" src="html.php">
....................................
</script>
そしてそれは働きました。 ...すべての回答
に
を変更、JavaScriptを含むHTMLを提供したいと仮定すると、
？ –
なぜあなたはすべての行を終了し、最後に\ nを追加する必要があると感じましたか？どうしてラインを続けさせないのですか？ –
カラー：colors [4] } }]; - > Line 77 最初に '\ n各行を挿入する私の意図は、ブラウザビューソースで簡単にスクリプトを読むことです。たぶん、コードが動作していると私はそれらを削除し、再度試してみるが、私は問題が発生しないと信じて – Prakash