0
我在这个网络开发项目中发现自己处于困境之中，希望有人能够帮助我更好地理解为什么我的一个谷歌图表不会在我的页面上绘制。带滑块范围的连续轴图表不会绘制？
我有一个图表绘制我怎么想它的工作测试页，这是的jsfiddle它，所以如果你想测试 http://jsfiddle.net/dlaliberte/pfTqP/
我直接从该拉的代码，你可以有确切的代码页面在哪里工作，并将其放到我的页面上，该页面上已经有4个其他可用的谷歌图表。现在当我添加这个图表时，它不会给我任何错误，但它不会画出来。
我打算发布第一张工作表的图表和我试图修复的图表（以'###'分隔），以及我的网页上设置为绘制的位置我希望有更多经验的人能够帮助我发现问题的来源，因为经过几个小时的调整和运行后，我仍然不确定发生了什么问题。
//################################### UPDATED JAVASCRIPT ####################################
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.csv.min.js"></script>
<script type="text/javascript"> // load the visualisation API
google.charts.load('visualization', 'current', '1.1',
{
callback: drawCharts,
packages: ['corechart', 'controls']
});
/* Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawLineChart);
google.charts.setOnLoadCallback(drawBarChart);
google.setOnLoadCallback(drawVisualization);
*/
function drawCharts() {
drawLineChart();
drawBarChart();
drawBarVisualization();
drawPieVisualization();
drawVisualization();
}
function drawLineChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Average Ratings',
'vAxis': { title: "Average Rating" },
'width': 1100,
'height': 540,
'legend': { position: 'bottom'},
'is3D':true,
'padding': 20,
'backgroundColor': 'Ivory',
'color':'Black',
hAxis: {
textStyle:{color: 'Black', weight: 'bold'}
},
series:
{
0: { color: 'Black', pointShape: 'square'},
}
}
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
google.visualization.events.addListener('testBtn', 'click',
function(event) {
data.sort({column: 0, desc: false});
chart.draw(data, options);
});
changeLineRange = function() {
data.sort({column: 0, desc: false});
chart.draw(data, options);
};
changeLineRangeBack = function() {
data.sort({column: 0, desc: true});
chart.draw(data, options);
};
}
function drawBarChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Average Ratings',
'vAxis': { title: "Average Rating" },
'width': 700,
'height': 540,
'legend':{position:'top',alignment:'start'},
'is3D':true,
'padding': 20,
'backgroundColor': 'Ivory',
series: {
0: { color: 'Black' },
},
'hAxis': {
title: "Date",
gridlines: { count: 3, color: '#CCC' },
format: 'dd-MMM-yyyy'
}
}
// Instantiate and draw our chart, passing in some options.
var chart2 = new google.visualization.ColumnChart(document.getElementById('bar_chart_div'));
chart2.draw(data, options);
changeOptions = function() {
chart2.setOption('is3D', true);
chart2.draw();
};
}
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
$('#myTabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
//Triple Line Chart
function drawVisualization() {
$.get("MockWeek.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
// CAPACITY - En-route ATFM delay - YY - CHART
var crt_ertdlyYY = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'crt_ertdlyYY',
dataTable: data,
options:{
'title': 'Average Ratings',
'vAxis': { title: "Average Rating" },
'width': 1100,
'height': 540,
'backgroundColor': 'Ivory',
'color':'Black',
'hAxis': {
title: "Date",
gridlines: { count: 3, color: '#CCC' },
format: 'dd-MMM-yyyy'
},
title: 'KWh Usage - Temperature Projected',
titleTextStyle : {color: 'Black', fontSize: 14},
curveType: 'function'
}
});
crt_ertdlyYY.draw();
changeRange = function() {
data.sort({column: 0, desc: false});
crt_ertdlyYY.draw();
};
changeRangeBack = function() {
data.sort({column: 0, desc: true});
crt_ertdlyYY.draw();
};
});
}
google.setOnLoadCallback(drawVisualization)
//Triple Pie Chart
function drawPieVisualization() {
$.get("Thornton.M2.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
// CAPACITY - En-route ATFM delay - YY - CHART
var pieMain = new google.visualization.ChartWrapper({
chartType: 'BarChart',
containerId: 'pieMain',
dataTable: data,
options:{
title: 'Bar Chart Test',
'vAxis': { title: "Bar Chart Test" },
'width': 1100,
'height': 530,
'backgroundColor': 'Ivory',
'color':'Black',
'hAxis': {
title: "Date",
gridlines: { count: 3, color: '#CCC' },
format: 'dd-MMM-yyyy'
},
title: 'Bar Chart Test',
titleTextStyle : {color: 'Black', fontSize: 16},
}
});
pieMain.draw();
});
}
google.setOnLoadCallback(drawPieVisualization)
changeRange = function() {
pieMain.sort({column: 0, desc: false});
pieMain.draw();
};
changeRangeBack = function() {
pieMain.sort({column: 0, desc: true});
pieMain.draw();
};
function drawVisualization() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none' }
},
// Display a single series that shows the closing value of the stock.
// Thus, this view has two columns: the date (axis) and the stock value (line series).
'chartView': {
'columns': [0, 3]
},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
'minRangeSize': 86400000
}
},
// Initial range: 2012-02-09 to 2012-03-20.
'state': {'range': {'start': new Date(2012, 1, 9), 'end': new Date(2012, 2, 20)}}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'CandlestickChart',
'containerId': 'chart',
'options': {
// Use the same chart area width as the control for axis alignment.
'chartArea': {'height': '80%', 'width': '90%'},
'hAxis': {'slantedText': false},
'vAxis': {'viewWindow': {'min': 0, 'max': 2000}},
'legend': {'position': 'none'}
},
// Convert the first column from 'date' to 'string'.
'view': {
'columns': [
{
'calc': function(dataTable, rowIndex) {
return dataTable.getFormattedValue(rowIndex, 0);
},
'type': 'string'
}, 1, 2, 3, 4]
}
});
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Stock low');
data.addColumn('number', 'Stock open');
data.addColumn('number', 'Stock close');
data.addColumn('number', 'Stock high');
// Create random stock values, just like it works in reality.
var open, close = 300;
var low, high;
for (var day = 1; day < 121; ++day) {
var change = (Math.sin(day/2.5 + Math.PI) + Math.sin(day/3) - Math.cos(day * 0.7)) * 150;
change = change >= 0 ? change + 10 : change - 10;
open = close;
close = Math.max(50, open + change);
low = Math.min(open, close) - (Math.cos(day * 1.7) + 1) * 15;
low = Math.max(0, low);
high = Math.max(open, close) + (Math.cos(day * 1.3) + 1) * 15;
var date = new Date(2012, 0 ,day);
data.addRow([date, Math.round(low), Math.round(open), Math.round(close), Math.round(high)]);
}
dashboard.bind(control, chart);
dashboard.draw(data);
}
</script>
这里是我画的图我的网页就在现场，这是一组4个选项卡，使用户可以通过标签不同的图表，到目前为止，它完美地工作。
<div class="col-md-12">
<h2 align="center" class="featurette-heading">Current Demand -<span style="color: Ivory;"> Hourly Usage</span></h2>
<br/>
<ul class="nav nav-tabs" role="tablist" data-tabs="tabs">
<li role="presentation" class="active"><a href="#home" class="buttonAnimate" aria-controls="home" role="tab" data-toggle="tab">Usage</a></li>
<li role="presentation"><a href="#profile" class="buttonAnimate" aria-controls="profile" role="tab" data-toggle="tab">Demand</a></li>
<li role="presentation"><a href="#messages" class="buttonAnimate" aria-controls="messages" role="tab" data-toggle="tab">Daily</a></li>
<li role="presentation"><a href="#settings" class="buttonAnimate" aria-controls="settings" role="tab" data-toggle="tab">Monthly</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" align="center" id="home"> <div class="chart" id="chart_div"></div>
<button class="btn btn-primary raised" onclick="changeLineRange();">
Ascending
</button>
<button class="btn btn-primary raised" onclick="changeLineRangeBack();">
Descending
</button><br /></div>
<div role="tabpanel" class="tab-pane fade" align="center" id="profile"><div class="chart" id="crt_ertdlyYY"></div>
<button class="btn btn-primary raised" onclick="changeRange();">
Ascending
</button>
<button class="btn btn-primary raised" onclick="changeRangeBack();">
Descending
</button><br /></div>
// ############################## THIS IS THE TAB PANEL WHERE I'M DRAWING THE NEW CHART ############################
<div role="tabpanel" class="tab-pane fade">
<div class="chart" id="dashboard">
<div id="chart" style='width: 915px; height: 300px;'></div>
<div id="control" style='width: 915px; height: 50px;'></div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="settings"><div class="chart" id="pieMain"></div></div>
</div>
</div>
我不知道，你可能需要看看还有什么，再次我出我的元素在这里，并试图获得关于如何实现这一点，非常感谢把握！
希望这可以帮助... – WhiteHat