1
代替ページで作成したビジュアルを表示するために垂直タブを取得する方法が不思議です。タブはスタイリングされており、CSSは長さのために省略されています。私のhtmlファイルはtest.htmlで、代替ファイルはApp.jsです。タブをクリックすると、作成したビジュアルが表示されます。App.jsビジュアルをテストして正常に動作することを確認しました。しかし、私がタブをクリックすると、何も表示されません。何も付いていないボタンをクリックするようなものです。何も起こりません。外部からビジュアルをロードする垂直タブを作成する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);
}
}