CSS Yardım Kapsayıcı Problemi |
7 Mesajlar | 1.360 Okunma | ||
https://jsfiddle.net/ycgqdv0j/1/ 
Sunum
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 1
});
}
</script>
<script> async defer></script>
<script>
// Make monochrome colors
var pieColors = (function () {
var colors = [],
base = Highcharts.getOptions().colors[0],
i;
for (i = 0; i < 10; i += 1) {
// Start out with a darkened base color (negative brighten), and end
// up with a much brighter color
colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
}
return colors;
}());
// Build the chart
Highcharts.chart('a', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
backgroundColor: '#ffffff00'
},
title: {
text: 'Browser market',
margin: 0,
style: {
font: 'normal 15px Verdana, sans-serif',
color : 'white'
}
},
exporting: { enabled: false },
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
colors: pieColors,
dataLabels: {
enabled: true,
format: '{point.name}
{point.percentage:.1f} %',
distance: -50,
filter: {
property: 'percentage',
operator: '>',
value: 4
}
}
}
},
series: [{
dataLabels: {
allowOverlap:false,
},
name: 'Share',
data: [
{ name: 'Chrome', y: 61.41 },
{ name: 'Internet Explorer', y: 11.84 },
{ name: 'Firefox', y: 10.85 },
{ name: 'Edge', y: 4.67 },
{ name: 'Safari', y: 4.18 },
{ name: 'Other', y: 7.05 }
]
}]
});
</script>
<script>
Highcharts.chart('b', {
chart: {
type: 'variablepie',
backgroundColor: '#ffffff00'
},
exporting: { enabled: false },
credits: {
enabled: false
},
title: {
text: 'Countries',
margin: 0,
style: {
font: 'normal 15px Verdana, sans-serif',
color : 'white'
}
},
tooltip: {
headerFormat: '',
pointFormat: '\u25CF {point.name}
' +
'Area (square km): {point.y}
' +
'Population density (people per square km): {point.z}
'
},
series: [{
minPointSize: 10,
innerSize: '20%',
zMin: 0,
name: 'countries',
data: [{
name: 'Spain',
y: 505370,
z: 92.9
}, {
name: 'France',
y: 551500,
z: 118.7
}, {
name: 'Poland',
y: 312685,
z: 124.6
}, {
name: 'Czech Republic',
y: 78867,
z: 137.5
}, {
name: 'Italy',
y: 301340,
z: 201.8
}, {
name: 'Switzerland',
y: 41277,
z: 214.5
}, {
name: 'Germany',
y: 357022,
z: 235.6
}]
}]
});
</script>
<script>
Highcharts.chart('c', {
chart: {
type: 'columnrange',
inverted: true,
backgroundColor: '#ffffff00'
},
title: {
text: 'Temperature variation',
style: {
font: 'normal 15px Verdana, sans-serif',
color : 'white'
}
},
exporting: { enabled: false },
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
style: {
color: 'white',
fontSize:'8px'
}
}
},
yAxis: {
title: {
text: 'Temperature ( °C )'
},
labels: {
style: {
color: 'white',
fontSize:'8px'
}
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
format: '{y}°C'
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
color: '#ffffff',
data: [
[-9.9, 10.3],
[-8.6, 8.5],
[-10.2, 11.8],
[-1.7, 12.2],
[-0.6, 23.1],
[3.7, 25.4],
[6.0, 26.2],
[6.7, 21.4],
[3.5, 19.5],
[-1.3, 16.0],
[-8.7, 9.4],
[-9.0, 8.6]
]
}]
});
</script>
<script>
//4.grafik
var gaugeOptions = {
chart: {
type: 'solidgauge',
backgroundColor: '#ffffff00'
},
title: null,
exporting: { enabled: false },
credits: {
enabled: false
},
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
var chartSpeed = Highcharts.chart('b1', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200
},
title: {
text: '',
style: {
font: 'normal 15px Verdana, sans-serif',
color : 'white'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [80],
dataLabels: {
format: '{y}
' +
'km/h',
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
// The RPM gauge
var chartRpm = Highcharts.chart('b2', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 5
},
title: {
text: 'RPM',
style: {
font: 'normal 15px Verdana, sans-serif',
color : 'white'
}
},
series: [{
name: 'RPM',
data: [1],
dataLabels: {
format: '{y:.1f}
' +
'* 1000 / min'
},
tooltip: {
valueSuffix: ' revolutions/min'
}
}]
}));
// Bring life to the dials
setInterval(function () {
// Speed
var point,
newVal,
inc;
if (chartSpeed) {
point = chartSpeed.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 100);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}
// RPM
if (chartRpm) {
point = chartRpm.series[0].points[0];
inc = Math.random() - 0.5;
newVal = point.y + inc;
if (newVal < 0 || newVal > 5) {
newVal = point.y - inc;
}
point.update(newVal);
}
}, 2000);
</script>
<script>
//5.grafik
$.getJSON(
'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json',
function (data) {
Highcharts.chart('d', {
chart: {
zoomType: 'x',
backgroundColor: '#ffffff00'
},
title: {
text: 'Traffic Density',
style:{ "color":"#ffffff"}
},
// subtitle: {
// text: document.ontouchstart === undefined ?
// 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
//},
credits: {
enabled: false
},
exporting: { enabled: false },
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
labels: {
style: {
color: 'white'
}
}
},
yAxis: {
title: {
text: 'Percentage %',
style:{ "color":"#ffffff"}
},
labels: {
style: {
color: 'white'
}
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
}
);
</script>
<script>
Highcharts.chart('e', {
chart: {
type: 'column',
backgroundColor: '#ffffff00'
},
title: {
text: 'Stacked column chart',
style:{ "color":"#ffffff"},
margin: 0,
},
credits: {
enabled: false
},
exporting: { enabled: false },
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
labels: {
style: {
color: 'white',
fontSize:'8px'
}
}
},
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
style: {
color: 'white'
}
}
},
tooltip: {
pointFormat: '{series.name}: {point.y} ({point.percentage:.0f}%)
',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}],
});
</script>
<script>
Highcharts.chart('f', {
chart: {
type: 'spline',
backgroundColor: '#ffffff00',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
time: {
useUTC: false
},
title: {
text: '',
style:{ "color":"#ffffff"},
margin: 0,
},
credits: {
enabled: false
},
exporting: { enabled: false },
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
labels: {
style: {
color: 'white'
}
}
},
yAxis: {
title: {
text: ''
},
labels: {
style: {
color: 'white'
}
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
headerFormat: '{series.name}
',
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}
{point.y:.2f}'
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
});
</script>
html,body, .grid-container { height: 100%; margin: 0; }
span {font-size: 1vw;}
.grid-container * {
position: relative;
}
.grid-container *:after {
position: absolute;
top: 0;
left: 0;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas: "map map map map map" "map map map map map" "map map map map map" "map map map map map";
}
.container {
z-index: 0;
}
#map, .container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 0.5fr 1fr 1fr 1fr;
grid-template-areas: "logo-left . . . logo-right" "left-side . . . right-side" "left-side . . . right-side" "left-side bottom-side bottom-side bottom-side right-side";
grid-area: map;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
#map{z-index:0}
.container div:before{
content:'';
width:100%;
height:100%;
position:absolute;
}
.left-side {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a" "b" "c";
grid-area: left-side;
background-color:rgba(25,25,112,.4);
}
#a {
position: relative;
grid-area: a;
border: 2px solid white;
border-radius: 40px 5px 40px 2px;
margin: 5px;
background-color: rgba(69,119,178,.4);
}
#b {
grid-area: b;
border: 2px solid white;
border-radius: 40px 5px 40px 2px;
margin: 5px;
background-color: rgba(69,119,178,.4);
}
#c {
grid-area: c;
border: 2px solid white;
border-radius: 40px 5px 40px 2px;
margin: 5px;
background-color: rgba(69,119,178,.4);
}
.right-side {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "d" "e" "f";
grid-area: right-side;
background-color:rgba(25,25,112,.4);
}
#d {
grid-area: d;
border: 2px solid white;
border-radius: 40px 5px 40px 2px;
margin: 5px;
background-color: rgba(69,119,178,.4);
}
#e {
grid-area: e;
border: 2px solid white;
border-radius: 40px 5px 40px 2px;
margin: 5px;
background-color: rgba(69,119,178,.4);
}
#f {
grid-area: f;
border: 2px solid white;
border-radius: 40px 5px 40px 2px;
margin: 5px;
background-color: rgba(69,119,178,.4);
}
.bottom-side {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "b1 b2";
grid-area: bottom-side;
}
#b1 {
grid-area: b1;
border: 2px solid white;
border-radius: 20px;
margin: 5px;
background-color: rgba(69,119,178,.4);
}
#b2 {
grid-area: b2;
border: 2px solid white;
border-radius: 20px;
margin: 5px;
background-color: rgba(69,119,178,.4);
}
.logo-left {
grid-area: logo-left;
font-size:3vw;
color: white;
background-color:rgba(25,25,112,.4);
}
.logo-right {
grid-area: logo-right;
font-size:3vw;
color: white;
background-color:rgba(25,25,112,.4);
}