{
"chart": {
"data": [
{"date":"2019-08-01", "open":3335, "high":3579, "low":1111, "close":1564 }
]
}
}
$.getJSON(json_URL, function(result){
/*
for (i = 0; i < result['chart']['data'].length; i++) {
console.log(result['chart']['data'][i]['date']);
}
*/
var data = JSON.parse(JSON.stringify(result['chart']['data']));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./amcharts4/core.js"></script>
<script src="./amcharts4/charts.js"></script>
<script src="./amcharts4/maps.js"></script>
<script src="./amcharts4/themes/animated.js"></script>
<div style="width: 100%;max-height: 500px;height: 100vh;" id="chartdiv"></div>
<script>
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Increase contrast by taking evey second color
chart.colors.step = 2;
// Add data
chart.data = generateChartData();
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.renderer.labels.template.location = 0.0001;
dateAxis.baseInterval = {
"timeUnit": "second",
"count": 1
}
// Create series
function createAxisAndSeries(field, name, opposite, bullet, numberFormat) {
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
if(chart.yAxes.indexOf(valueAxis) != 0){
valueAxis.syncWithAxis = chart.yAxes.getIndex(0);
}
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = field;
series.dataFields.dateX = "date";
series.strokeWidth = 2;
series.yAxis = valueAxis;
series.name = name;
if(field == "T0"){
series.tooltipText = " {date.formatDate('YYYY-MM-dd hh:mm')} \n {name}: [red bold]{valueY}°C[/]";
series.stroke = am4core.color("red");
}else if(field == "RH"){
series.tooltipText = " {date.formatDate('YYYY-MM-dd hh:mm')} \n {name}: [blue bold]{valueY}%[/]";
series.stroke = am4core.color("blue");
}
series.tensionX = 0.8;
series.showOnInit = true;
var interfaceColors = new am4core.InterfaceColorSet();
switch(bullet) {
case "RH":
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.strokeWidth = 2;
bullet.circle.radius = 4;
bullet.circle.fill = am4core.color("#fff");
bullet.circle.stroke = am4core.color("blue");
var bullethover1 = bullet.states.create("hover");
bullethover1.properties.scale = 1.3;
valueAxis.title.text = "相對濕度 (%)";
break;
case "T0":
// Make bullets grow on hover
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.strokeWidth = 2;
bullet.circle.radius = 4;
bullet.circle.fill = am4core.color("#fff");
bullet.circle.stroke = am4core.color("red");
var bullethover1 = bullet.states.create("hover");
bullethover1.properties.scale = 1.3;
valueAxis.title.text = "氣溫 (°C)";
break;
default:
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = interfaceColors.getFor("background");
bullet.circle.strokeWidth = 2;
break;
}
valueAxis.renderer.line.strokeOpacity = 1;
valueAxis.renderer.line.strokeWidth = 2;
valueAxis.renderer.line.stroke = series.stroke;
valueAxis.renderer.labels.template.fill = series.stroke;
valueAxis.renderer.opposite = opposite;
valueAxis.numberFormatter = new am4core.NumberFormatter();
valueAxis.numberFormatter.numberFormat = numberFormat;
}
createAxisAndSeries("T0", "氣溫", true, "T0", "#°C");
createAxisAndSeries("RH", "相對濕度", false, "RH", "#'%'");
// Add legend
chart.legend = new am4charts.Legend();
// Add cursor
chart.cursor = new am4charts.XYCursor();
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd H:m";
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.parent = chart.bottomAxesContainer;
// Enable export
chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.menu.items[0].icon = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIi";
// chart.exporting.menu.container = document.getElementById("tools");
// generate some random data, quite different range
function generateChartData() {
var chartData = [];
chartData.push({date: "2020-03-04 00:00",RH: "78.7",T0: "20",});
chartData.push({date: "2020-03-04 00:01",RH: "78.8",T0: "20",});
chartData.push({date: "2020-03-04 00:02",RH: "79.1",T0: "20",});
chartData.push({date: "2020-03-04 00:03",RH: "79.1",T0: "20",});
chartData.push({date: "2020-03-04 00:04",RH: "78.9",T0: "20",});
return chartData;
}
}); // end am4core.ready()
$(document).ready(function(){
$("g[aria-labelledby='id-66-title']").hide();
})
</script>
Ouput:
function imageManager(){
var fd = new FormData();
var files = $('#file')[0].files[0];
fd.append('file', files);
$.ajax({
type:"POST",
url:"http://127.0.0.1/ajax/do-item.ajax.php",
data: fd,
contentType: false,
processData: false,
beforeSend:function(){
$("#ajax-file").html("Loading...");
},
success:function(data){
$("#ajax-file").html(decodeURI(data));
}
});
}
<?php var_dump($_FILES); ?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<style>
.map {
height: 100%;
width: 100%;
}
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
</style>
<title>OpenLayers 3 example</title>
</head>
<body>
<div id="map" class="map">
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content" style="width:300px; height:120px;"></div>
</div>
</div>
<script type="text/javascript">
/**
* Elements that make up the popup.
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
/**
* Create an overlay to anchor the popup to the map.
*/
var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250 // 當彈出超出地圖邊界時，為了彈出全部可見，地圖移動的速度。單位為毫秒(ms)
}
}));
map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([114.17232, 22.29958], 'EPSG:4326', 'EPSG:3857'),
zoom: 15
})
});
var vectorLayer1 = new ol.layer.Vector({
source:new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([parseFloat(114.17232), parseFloat(22.29958)], 'EPSG:4326', 'EPSG:3857')),
})]
}),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
anchorXUnits: "fraction",
anchorYUnits: "fraction",
src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
})
})
});
map.addLayer(vectorLayer1);
var vectorLayer2 = new ol.layer.Vector({
source:new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([parseFloat(114.1704), parseFloat(22.3012)], 'EPSG:4326', 'EPSG:3857')),
})]
}),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
anchorXUnits: "fraction",
anchorYUnits: "fraction",
src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
})
})
});
map.addLayer(vectorLayer2);
/**
* Add a click handler to the map to render the popup.
*/
map.on('click', function(e) {
var feature = map.forEachFeatureAtPixel(e.pixel, function(feature) {
return feature;
});
map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
if (layer === vectorLayer1) {
var coordinate = e.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326'));
content.innerHTML = '<p>A：</p><code>' + hdms + '</code>';
overlay.setPosition(coordinate);
map.addOverlay(overlay);
}else if (layer === vectorLayer2) {
var coordinate = e.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
coordinate, 'EPSG:3857', 'EPSG:4326'));
content.innerHTML = '<p>B：</p><code>' + hdms + '</code>';
overlay.setPosition(coordinate);
map.addOverlay(overlay);
}
});
});
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
<style>
.map {
height: 100%;
width: 100%;
}
</style>
<title>OpenLayers example</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([114.17232, 22.29958], 'EPSG:4326', 'EPSG:3857'),
zoom: 16
})
});
</script>
</body>
</html>
