我是网络开发的新手，我试图弄清楚如何在不增加div大小的情况下在div元素中移动文本。我尝试使用填充，但其他文本因为它而未对齐（活动日志向下移动）。
我正在尝试在当前状态下集中对齐文本，并且只将文本“当前状态”和“活动日志”设置为粗体而不是下面的文本。
<textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
<script>
var ck = CKEDITOR.replace( 'editor1' );
ck.on( 'fileUploadRequest', function(evt) {
//custom code to remove image
//and upload content here
});
</script>
$(function updat() {
var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
var humid = [],
date = [],
high=[],
day=[],
chanceOfRain=[],
humid_final = [],
day_final=[],
high_final=[],
chanceOfRain_final=[],
Itemss=[],
SortedItems=[]
var htmlText='';
$.getJSON(url, function (json) {
$(json['Items']).each(function(i, data) {
//Store indicator name
// fill the date array
humid.push(data.humidity);
// fill the string data array
date.push(data.Date);
high.push(data.high);
day.push(data.Day);
chanceOfRain.push(data.chanceOfRain);
});
//unsorted array
Itemss=$(json['Items']);
//console.log("ITEMS",Itemss);
//sorted array- date
date.sort(function(a,b) { return a - b;});
// Itemss.sort(function(a,b){return date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});
console.log("Sorted Days", date);
Itemss.sort(function(a,b){return date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});
console.log(" Sorted ITEMS",Itemss);
////////
// query send string that we need to convert into numbers
for (var i = 0; i < humid.length; i++) {
if (humid[i] != null) {
humid_final.push(parseFloat(humid[i]));
high_final.push(parseFloat(high[i]));
day_final.push(parseFloat(day[i]));
chanceOfRain_final.push(parseFloat(chanceOfRain[i]));
} else {
humid_final.push(null)
};
}
//sorting the arrays
day_final.sort(function(a,b) { return a - b;});
// console.log("Sorted day_final", day_final);
humid_final.sort(function(a,b) { return a - b;});
//ACTIVITY LOG
var h1 = [10, 20, 30, 40,50,60];
var t1 = [50, 60, 70, 80, 90, 100];
var activ= document.querySelector('.activ');
for(var i=0; i<h1.length;i++){
activ.innerHTML += `<p>Temperature was ${t1[i]} degrees and humidity was ${h1[i]} % `;
}
var chart = new Highcharts.chart({
credits: {
enabled: false
},
chart: {
height: 200,
type: 'spline',
renderTo: 'light',
marginBottom: 100
},
title: {
text: ' Ambient Light'
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
subtitle: {
text: ''
},
xAxis: {
categories: day_final //.reverse() to have the min year on the left
},
series: [{
name: 'light level',
data: high_final, //
color: '#9b0000'
}]
});
var chart1 = new Highcharts.chart({
credits: {
enabled: false
},
chart: {
height: 200,
type: 'spline',
renderTo: 'temp&humid',
marginBottom: 100
},
title: {
text: 'Temperature and Humidity'
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
subtitle: {
text: ''
},
xAxis: {
categories: day_final //.reverse() to have the min year on the left
},
series: [{
name: 'Temperature',
data: chanceOfRain_final,
color:'#646569' //
},
{
type:'line',
name:'Humidity',
data: day_final,
color:'#c5050c'
}]
});
var chart2= Highcharts.chart('stacked', {
credits: {
enabled: false
},
chart: {
height: 250,
width: 400,
type: 'column'
},
title: {
text: "Today's Light and Water Sources"
},
xAxis: {
categories: ['Water', 'Light']
},
yAxis: {
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Natural',
data: [7 , 6],
color:'#c5050c'
}, {
name: 'Automatic',
data: [ 3, 4],
color: '#646569'
}]
});
}); //getJSON method
//setTimeout(updat, 3000);
});
$(function dat() {
// console.log("here");
var url="https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
var htmlText='';
$.getJSON(url, function (json) {
});
});
答案 0 :(得分：0)
我想我明白了。在编写html / css（我最喜欢的一个是崇高的）时，你可能想要考虑一些编辑器。我注意到的是这个答案唯一真正的外卖应该是标签在打开时没有被关闭。我在第二部分中注意到<b>标记和<center>标记。
$(function updat() {
var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
var humid = [],
date = [],
high=[],
day=[],
chanceOfRain=[],
humid_final = [],
day_final=[],
high_final=[],
chanceOfRain_final=[],
Itemss=[],
SortedItems=[]
var htmlText='';
$.getJSON(url, function (json) {
$(json['Items']).each(function(i, data) {
//Store indicator name
// fill the date array
humid.push(data.humidity);
// fill the string data array
date.push(data.Date);
high.push(data.high);
day.push(data.Day);
chanceOfRain.push(data.chanceOfRain);
});
//unsorted array
Itemss=$(json['Items']);
//console.log("ITEMS",Itemss);
//sorted array- date
date.sort(function(a,b) { return a - b;});
// Itemss.sort(function(a,b){return date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});
console.log("Sorted Days", date);
Itemss.sort(function(a,b){return date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});
console.log(" Sorted ITEMS",Itemss);
////////
// query send string that we need to convert into numbers
for (var i = 0; i < humid.length; i++) {
if (humid[i] != null) {
humid_final.push(parseFloat(humid[i]));
high_final.push(parseFloat(high[i]));
day_final.push(parseFloat(day[i]));
chanceOfRain_final.push(parseFloat(chanceOfRain[i]));
} else {
humid_final.push(null)
};
}
//sorting the arrays
day_final.sort(function(a,b) { return a - b;});
// console.log("Sorted day_final", day_final);
humid_final.sort(function(a,b) { return a - b;});
//ACTIVITY LOG
var h1 = [10, 20, 30, 40,50,60];
var t1 = [50, 60, 70, 80, 90, 100];
var activ= document.querySelector('.activ');
for(var i=0; i<h1.length;i++){
activ.innerHTML += `<p>Temperature was ${t1[i]} degrees and humidity was ${h1[i]} % `;
}
var chart = new Highcharts.chart({
credits: {
enabled: false
},
chart: {
height: 200,
type: 'spline',
renderTo: 'light',
marginBottom: 100
},
title: {
text: ' Ambient Light'
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
subtitle: {
text: ''
},
xAxis: {
categories: day_final //.reverse() to have the min year on the left
},
series: [{
name: 'light level',
data: high_final, //
color: '#9b0000'
}]
});
var chart1 = new Highcharts.chart({
credits: {
enabled: false
},
chart: {
height: 200,
type: 'spline',
renderTo: 'temp&humid',
marginBottom: 100
},
title: {
text: 'Temperature and Humidity'
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
subtitle: {
text: ''
},
xAxis: {
categories: day_final //.reverse() to have the min year on the left
},
series: [{
name: 'Temperature',
data: chanceOfRain_final,
color:'#646569' //
},
{
type:'line',
name:'Humidity',
data: day_final,
color:'#c5050c'
}]
});
var chart2= Highcharts.chart('stacked', {
credits: {
enabled: false
},
chart: {
height: 250,
width: 400,
type: 'column'
},
title: {
text: "Today's Light and Water Sources"
},
xAxis: {
categories: ['Water', 'Light']
},
yAxis: {
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Natural',
data: [7 , 6],
color:'#c5050c'
}, {
name: 'Automatic',
data: [ 3, 4],
color: '#646569'
}]
});
}); //getJSON method
//setTimeout(updat, 3000);
});
$(function dat() {
// console.log("here");
var url="https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
var htmlText='';
$.getJSON(url, function (json) {
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src= "Ag.js"></script>
<div id="light" style="min-width: 310px; height: 200px; left:10px"></div>
<div id="temp&humid" style="min-width: 310px; height: 200px; left:10px"></div>
<div id="stacked"> </div>
<div id="parentContainer" style="margin-left:400px; width: 200px; margin-top: -20%" >
<div id="currentSatus"><center><b>Current Status</b></center></div>
<br>
<div id="temp" style=" background: #72D923;height: 50px "><font face='verdana'><center>Temperature</center></font> </div>
<div id="hum" style="background: red; height: 50px"><font face='verdana'><center>Humidity</center></font></div>
<div id="water" style="background:#72D923; height: 50px "><font face='verdana'><center>Water</center></font></div>
<div id="ligh" style="background: red; height: 50px"><font face='verdana'><center>Light</center></font></div>
</div>
<div class=" activ" id="log" style="margin-left: 600px; text-align: center; margin-top: -18.5%"><center>Activity Log</center> </div>