Javascript 来自MYSQL php echo的Google线形图数据
我正在尝试使用php echo显示数据库中的数据 这段代码显示一个图表，我试图看看是否可以通过echo更改数据（将350值更改为其他值）。我在下面的示例代码中尝试了它，但它不起作用。有什么不对劲吗 这行有php var raw_data=[['Website'，73，104，129，146，176，139，149，218，194，96，253]，现在我还没有从mysql中提取数据，这是我计划稍后做的，我确信我可以使用echo操作数据Javascript 来自MYSQL php echo的Google线形图数据,javascript,php,mysql,database,echo,Javascript,Php,Mysql,Database,Echo,我正在尝试使用php echo显示数据库中的数据 这段代码显示一个图表，我试图看看是否可以通过echo更改数据（将350值更改为其他值）。我在下面的示例代码中尝试了它，但它不起作用。有什么不对劲吗 这行有php var raw_data=[['Website'，73，104，129，146，176，139，149，218，194，96，253]，现在我还没有从mysql中提取数据，这是我计划稍后做的，我确信我可以使用echo操作数据 <script> /*
<script>
/*
* This script is dedicated to building and refreshing the demo chart
* Remove if not needed
*/
// Demo chart
var chartInit = false,
drawVisitorsChart = function()
{
// Create our data table.
var data = new google.visualization.DataTable();
var raw_data = [['Website', <?php echo '350';?>, 73, 104, 129, 146, 176, 139, 149, 218, 194, 96, 253],
['Shop', 82, 77, 98, 94, 105, 81, 104, 104, 92, 83, 107, 91],
['Forum', 50, 39, 39, 41, 47, 49, 59, 59, 52, 64, 59, 51],
['Others', 45, 35, 35, 39, 53, 76, 56, 59, 48, 40, 48, 21]];
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
data.addColumn('string', 'Month');
for (var i = 0; i < raw_data.length; ++i)
{
data.addColumn('number', raw_data[i][0]);
}
data.addRows(months.length);
for (var j = 0; j < months.length; ++j)
{
data.setValue(j, 0, months[j]);
}
for (var i = 0; i < raw_data.length; ++i)
{
for (var j = 1; j < raw_data[i].length; ++j)
{
data.setValue(j-1, i+1, raw_data[i][j]);
}
}
// Create and draw the visualization.
// Learn more on configuration for the LineChart: http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html
var div = $('#demo-chart'),
divWidth = div.width();
new google.visualization.LineChart(div.get(0)).draw(data, {
title: 'Monthly unique visitors count',
width: divWidth,
height: $.template.mediaQuery.is('mobile') ? 180 : 265,
legend: 'right',
yAxis: {title: '(thousands)'},
backgroundColor: ($.template.ie7 || $.template.ie8) ? '#494C50' : 'transparent', // IE8 and lower do not support transparency
legendTextStyle: { color: 'white' },
titleTextStyle: { color: 'white' },
hAxis: {
textStyle: { color: 'white' }
},
vAxis: {
textStyle: { color: 'white' },
baselineColor: '#666666'
},
chartArea: {
top: 35,
left: 30,
width: divWidth-40
},
legend: 'bottom'
});
// Message only when resizing
if (chartInit)
{
notify('Chart resized', 'The width change event has been triggered.', {
icon: 'img/demo/icon.png'
});
}
// Ready
chartInit = true;
};
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {
'packages': ['corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawVisitorsChart);
// Watch for block resizing
$('#demo-chart').widthchange(drawVisitorsChart);
// Respond.js hook (media query polyfill)
$(document).on('respond-ready', drawVisitorsChart);
</script>
/*
*此脚本专用于构建和刷新演示图表
*如果不需要，请移除
*/
//演示图
var chartInit=false，
drawVisitorsChart=函数（）
{
//创建我们的数据表。
var data=new google.visualization.DataTable（）；
var raw_data=[[“网站”，73、104、129、146、176、139、149、218、194、96、253]，
[‘商店’、82、77、98、94、105、81、104、104、92、83、107、91]，
[‘论坛’、50、39、39、41、47、49、59、59、52、64、59、51]，
[‘其他’、45、35、35、39、53、76、56、59、48、40、48、21]；
变量月份=['1月'、'2月'、'3月'、'4月'、'5月'、'6月'、'7月'、'8月'、'9月'、'10月'、'11月'、'12月']；
data.addColumn（'string'，'Month'）；
对于（变量i=0；i$有关。一旦删除/替换模板，图表就会正常工作
页面必须有.php
扩展才能解释php代码。在控制台中调试取决于您使用的浏览器-通常，如果您右键单击页面并选择检查元素
，控制台将显示在底部-您看到的内容取决于浏览器，但肯定Firefox和Chrome都有tabs呼叫控制台<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>jQuery experiments with Google apis</title>
<script src='https://www.google.com/jsapi'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
divWidth=600;
divHeight=400;
var chartInit = false,
drawVisitorsChart = function(){
var data = new google.visualization.DataTable();
var raw_data = [['Website', <?php echo 428;?>, 73, 104, 129, 146, 176, 139, 149, 218, 194, 96, 253],
['Shop', 82, 77, 98, 94, 105, 81, 104, 104, 92, 83, 107, 91],
['Forum', 50, 39, 39, 41, 47, 49, 59, 59, 52, 64, 59, 51],
['Others', 45, 35, 35, 39, 53, 76, 56, 59, 48, 40, 48, 21]];
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
data.addColumn('string', 'Month');
for (var i = 0; i < raw_data.length; ++i){
data.addColumn('number', raw_data[i][0]);
}
data.addRows( months.length );
for (var j = 0; j < months.length; ++j){
data.setValue(j, 0, months[j]);
}
for (var i = 0; i < raw_data.length; ++i){
for (var j = 1; j < raw_data[i].length; ++j){
data.setValue(j-1, i+1, raw_data[i][j]);
}
}
/*
the $.template references all caused errors for me
so I removed them
*/
var div = $('#demo-chart');
var divWidth = div.width();
new google.visualization.LineChart(div.get(0)).draw(data, {
title: 'Monthly unique visitors count',
width: divWidth,
height: divHeight,/*$.template.mediaQuery.is('mobile') ? 180 : 265, */
legend: 'right',
yAxis: {title: '(thousands)'},
backgroundColor: '#494C50',
legendTextStyle: { color: 'white' },
titleTextStyle: { color: 'white' },
hAxis: {
textStyle: { color: 'white' }
},
vAxis: {
textStyle: { color: 'white' },
baselineColor: '#666666'
},
chartArea: {
top: 35,
left: 30,
width: divWidth-40
},
legend: 'bottom'
});
if( chartInit ) {
notify('Chart resized', 'The width change event has been triggered.', {
icon: 'img/demo/icon.png'
});
}
chartInit = true;
};
google.load('visualization', '1', {
'packages': ['corechart']
});
google.setOnLoadCallback(drawVisitorsChart);
/* This caused errors for me */
/* $('#demo-chart').widthchange( drawVisitorsChart );*/
$(document).on('respond-ready', drawVisitorsChart);
</script>
</head>
<body>
<div id='demo-chart' style='width:600px;height:400px;'></div>
</body>
</html>
用googleapi进行jQuery实验
宽度=600；
高度=400；
var chartInit=false，
drawVisitorsChart=函数（）{
var data=new google.visualization.DataTable（）；
var raw_data=[[“网站”，73、104、129、146、176、139、149、218、194、96、253]，
[‘商店’、82、77、98、94、105、81、104、104、92、83、107、91]，
[‘论坛’、50、39、39、41、47、49、59、59、52、64、59、51]，
[‘其他’、45、35、35、39、53、76、56、59、48、40、48、21]；
变量月份=['1月'、'2月'、'3月'、'4月'、'5月'、'6月'、'7月'、'8月'、'9月'、'10月'、'11月'、'12月']；
data.addColumn（'string'，'Month'）；
对于（变量i=0；i