VBA HTML

< !DOCTYPE HTML>
< html>
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< meta http-equiv="content-language" content="ja" />
< meta http-equiv="X-UA-Compatible" content="IE=edge">

< link rel="stylesheet" type="text/css" href="CSS/ifrmSrc.css">
< link rel="stylesheet" type="text/css" href="Chart/googleChart.css">
< link rel="stylesheet" type="text/css" href="Chart/ChartJS.css">


< /head>



< body>< !-- onload="fload()"onclick="gauge1()"-->



< !--------------------------section1--------------------------------->
< section class="section js-section" data-section-name="section1">
< div class="section-content" id="p1">

　
　　　　 < p style="font-size:20px;text-align:center">BBBBBBBBBB< /p>
　
　　　
　　　　　< div style="width:50vw;height:500px;float:left;vertical-align:top;">

　　　　 < canvas id="myChart">< /canvas>

　　　　　< /div>

　　　　　< div align="center" style="width:40%;height: 500px;text-size:7px;float:left;margin-left:35px">
　　　　 　　 < div id="table1_div">< /div>
　　　　 　　< canvas id="ID_doughnut"　style="margin:100px">< /canvas>
　　　　　< /div>

< /div>
< /section>< !--box-->
< !--------------------------section1--------------------------------->



< !--------------------------section2--------------------------------->
< section class="section js-section" data-section-name="section2">
< div class="section-content"id="p2">



< hr width="70%">
< br>< br>

< div id="donutchart" style="width: 1000px; height: 400px;float:left;">< /div>

< div>
< p>CCCCCCCCCCCC< /p>
< p>CCCCCCCCCCCC< /p>
< p>CCCCCCCCCCCC< /p>
< p>CCCCCCCCCCCC< /p>
< p>CCCCCCCCCCCC< /p>
< p>CCCCCCCCCCCC< /p>
< p>CCCCCCCCCCCC< /p>
< /div>


< /div>
< /section>< !--box-->
< !--------------------------section2--------------------------------->



< !--------------------------section3--------------------------------->
< section class="section js-section" data-section-name="section3">
< div class="section-content">



< div id="control_div" style="clear:both;width:100%;height:102vw;">

< div id="filter_div"style="width:90%;float:left">< /div>
< br>< button onclick="data(1)">week< /button>< button onclick="data(2)">days< /button>
< div id="id_table" style="width:100%;clear: both;">< /div>
< /div>


< /div>
< /section>
< !--------------------------section3--------------------------------->

< !--------------------------section4----------------------------------->
< section class="section js-section" style="background: linear-gradient(white, black);"data-section-name="section4">
< div class="section-content">



< div style="width:40vw:height:600px;float:left">
< p style="font-size:20px;text-align:center;">AAAAAAAAAAAAAA< /p>
< hr width="70%">
< /div>

< div style="height: 500px;">
< table width="100%">
< tr>< td>< p>CPH< /p>< /td>< /tr>
< tr>< td style"vertical-align:bottom">< div id="gct_sample_gauge">< /div>< /td>< /tr>
< /table>
< /div>





< /div>
< /section>< !--box-->
< !---------------------------section4--------------------------------->

< script src="https://www.chartjs.org/dist/2.8.0/Chart.min.js">< /script>
< script src="Chart/ChartJS.js">< /script>

< script src="https://www.gstatic.com/charts/loader.js">< /script>
< script src="https://www.gstatic.com/charts/loader.js">< /script>
< script src="Data.js">< /script>

< script>


AAA[1].forEach(function (value, index) {
AAA[1][index].splice(7)
});
AAA[2].forEach(function (value, index) {
AAA[2][index].splice(2,5)
});


var n=1;
function data(num){n=num;fload()};


datasource={1:[['名前', '年齢'], ['Michael' , 0],['Elisa', 0]],
2:[['名前', '年齢'], ['Michael' , 12],['Elisa', 20]],
4:[['label','AAA'],['AAA',0]],
5:[['label','AAA'],['AAA',55]]
};


//*****************google.charts.load*********************
google.charts.load('current',{'packages': ['corechart','controls','gauge','table','bar']});
//*****************google.charts.setOnLoad****************
//google.charts.setOnLoadCallback(drawTable)
window.onload=function(){fload()};
function fload(){
document.body.style.visibility="visible"
//alert(1)
dataload();
gauge1()
drawChart()
//bar1Chart();
control()
drawTable()
//setTimeout(gauge1(),1500)
changeParentHeight()
top_linebar()
doughnutChart()
};


//*****************dataのimport*****************
function dataload() {

data3 = google.visualization.arrayToDataTable(datasource[1]);
data4 = google.visualization.arrayToDataTable(datasource[2]);
data5 = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);

datatbl = google.visualization.arrayToDataTable(AAA[n]);
};

//GoogleChart-Donut-----------------------
//-fun:drawChart()-draw(data5, options)
< /script>< script type="text/javascript" src="Chart/googleDonut.js">< /script>< script>
//----------------------------------------


//GoogleChart-Gauge-----------------------
//-fun:gauge1()-draw(data3, options)
//--------------draw(data4, options)
< /script>< script src="Chart/googleGauge.js">< /script>< script>
//----------------------------------------



//GoogleChart-【SideBar】-ID:bar1_div-----
//-fun:bar1Chart()-draw(bardata0, options)
//-----------------draw(bardata1, options)
< /script>< script src="Chart/googleSideBar.js">< /script>< script>
//----------------------------------------


//GoogleChart-Table-----------------------
//-fun:control()-draw(datatbl,options)
< /script>< script src="Chart/googleTable.js">< /script>< script>
//----------------------------------------

function drawTable() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'Table',
dataTable: [AAA[1][0],
AAA[1][7],
AAA[1][3],
AAA[1][6]
],
options: {'showRowNumber':false},
containerId: 'table1_div'
});
wrapper.draw();
}



< /script>
< style>
.google-visualization-table-tr-head {
background-color: black;
color: white;
height: 40px;
}
< /stye>

< div id="pointer">
< button id="btn1"onclick="move1(-1)">▲< /button>
< button id="btn2"onclick="move1(+1)">▼< /button>
< /div>
< div id="pointer1">
< ul>
< li>< a href="#" onclick="move1('#section1')">▲< /a>< /li>
< li>< a href="#" onclick="move1('#section2')">▼< /a>< /li>
< /ul>
< /div>
< style>

#pointer{
vertical-align:center;
position: fixed;
top:35%;
right:20px;
height:95%;
width:15px;

}
#pointer button{
text-align:center;
vertical-align:center;
height:60px;
width:30px;
background-color:transparent;
border-color: transparent;
text-size:20px;
}
#pointer button:hover{
cursor: pointer;

}
#pointer ul{
height:95%;
margin: 0;
padding: 0;
list-style-type: none;

}
#pointer li{
height:30%;
display: inline;
padding: 0;
margin: 0;

}
#pointer li a{
margin-top: 30px;
height:10%;
display: block;
vertical-align: middle;
padding: 3px 10px;
text-decoration: none;
color: #333;
width: 25px;

text-align: center;
font-size: 14px;


}
#pointer li a:hover{

}
< /style>
< script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js">< /script>
< script src="https://cdn.rawgit.com/lukehaas/Scrollify/01cca204/jquery.scrollify.min.js">< /script>
< script>
var option = {
section : '.js-section',
easing: "swing",
scrollSpeed: 600,
scrollbars:false,
};
//$.scrollify.disable();
$(function() {
$.scrollify(option); // scrollifyの実行

});
var s=1
function move1(p){
s=s+p
var page='#section'+s
$.scrollify.enable();
$.scrollify.move(page);
$.scrollify.disable();
button()
}
function button(){
if(s==1){
document.getElementById("btn1").style.visibility='hidden'
}else if(s==4){
document.getElementById("btn2").style.visibility='hidden'
}else{
document.getElementById("btn1").style.visibility='visible'
document.getElementById("btn2").style.visibility='visible'
}
}

window.addEventListener("scroll", () => {
if(document.getElementById('p2').getBoundingClientRect().top==0){
alert(document.getElementById('p2').getBoundingClientRect().top)
}

});
< /script>
< /body>
< /html>