我想知道如何获取“垂直”选项卡以显示在替代页面上创建的视觉效果。标签的样式，由于长度而省略了CSS。我的html文件是test.html，备用文件是App.js。当我单击选项卡时，我想显示在App.js中创建的视觉效果，我已经测试了视觉效果以确保它们正常工作。但是，当我单击选项卡时，什么都没有显示。就像单击一个没有附加任何按钮的按钮一样。什么都没发生。
如何将视觉效果添加到选项卡中以使其显示？
test.html页面的代码（我省略了CSS链接。CSS可以对齐）：
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body ng-App="App">
<div id="container" style="padding-top: 20px" ng-controller="AppController">
<div id="tab">
<button class="tablink" onclick="show1()">Visual 1</button>
</div>
<div id="visual1" ng-show"display1">
<script type="text/javascript" src="App.js"></script>
<div id="testdash">
<div id="filter1"></div>
<div id="chart1"></div>
</div>
</div>
</body>
</html>
App.js页面：
var app = angular.module('App',);
app.controller('AppController', function($scope, $http, $ace) {
$scope.show1 = function() {
if ($scope.display1 == false) {
getCurrVis1();
$scope.display1 = true; }
else {
$scope.display1 = false; }
}
function getCurrVis1() {
var req = { method: 'POST',
url: "test.tsv"
}
$http(req).success(function(js) {
var data = js;
drawChart1(data);
})
}
function drawChart1(data) {
//creates data table
var table = new google.visualization.DataTable();
var data = data;
console.log(data);
var dataRows = data.split("\n");
var headers = dataRows[0].split('\t');
table.addColumn('string', headers[0]);
table.addColumn('number', headers[1]);
table.addColumn('string', headers[2]);
var rs = [];
for (var x=1; x<(dataRows.length); x++) {
var cols = dataRows[x].split('\t');
var row = [];
row.push(cols[0]);
row.push(parseInt(cols[1]));
row.push(cols[2]);
rs.push(row);
}
table.addRows(rs);
// Create a dashboard to bind a filter to the chart
var dashboard = new google.visualization.Dashboard(document.getElementById('testdash'));
var filter1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter1',
'options': {
'filterColumnIndex': 0,
'ui': {
'label': 'Filter:',
'selectedValuesLayout': 'belowStacked',
'allowTyping': false,
'allowMultiple':true,}
}
});
//Sets chart, and chart options
var chart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart1',
'options': { 'left': '25%',
'height': '80%',
'width': '80%' ,
'width':800,
'height':600,
'pieSliceText': 'value'},
'view': { 'columns': [0,1]}
});
dashboard.bind(filter1, chart);
dashboard.draw(table);
}
}
最佳答案
我想到了！稍微更改HTML页面，我们一切顺利！
这是工作示例的代码：
<html>
<body>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<div class="tab">
<button class="tablinks" onclick="functionname(event, 'DIVID') ng-click="show1()">TabName</button>
</div>
<div id="DIVID" class="tabcontent">
<h3>Content1</h3>
<div id="panel1" ng-show="display5"> <!-- div id for panels and down...-->
<script type="text/javascript" src="App.js"></script>
<div id = "test.js">
<div id = "filter1"></div>
<div id = "chart1" align = "center"></div>
</div>
</div>
</div>
<script>
function functionname(value1, value2) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(value2).style.display = "block";
value1.currentTarget.className += " active";
}
</script>
</body>
</html>