อยากทราบวิธีการปรับ scale กราฟของแกน x และแกน y แล้ววิธีปรับขนาดหน้าเว็บไซด์ให้เข้ากับขนาดของจอคอมแล้วโทรศัพท์ครับ
ผมติดปัญหาเกี่ยวกับการออกแบบเว็บไซด์
ตอนนี้ผมสร้างกราฟแสดงข้อมูลที่เก็บไว้แล้วแต่ผมติดปัญหาตรงที่ scale ของแกน x และแกน y ที่อยู่ในกราฟ ครับ
ผมทราบวิธีการปรับ scale ของแต่ละแกนครับ *ไม่ใช่การปรับขนาดทั้งหมดของกราฟนะครับ* เช่น สมมติวาผมมีข้อมูลในกราฟโดยแสดงอยู่ที่ x=y=5 แต่ผมอยากปรับให้แกน x และ y นั้นแสดงค่าสูงสุดของแต่ละแกน เท่ากับ 10 (แกน x = แกน y =10) ครับ
แล้วก็อีกปัญหานึงคือเมื่อผมเปิดเว็บที่ผมสร้างขึ้นในโทรศัพท์ ตำแหน่งข้อมูลต่างๆของในที่แสดงอยู่ในโทรศัพท์มันจะเบี้ยวไปบ้าง ครับ พอจะมีวิธีปรับขนาดหน้าเว็บให้เหมาะกับขนาดจอโทรศัพท์ รึเปล่าครับ
อันนี้เป็นตัวอย่าง code ของผมครับ
Code (PHP)
<?php
$query = "
SELECT DATETIME AS date, A
FROM xxxxx
GROUP BY ID
";
$result = mysqli_query($con, $query);
$resultchart = mysqli_query($con, $query);
//for chart
$id = array();
$A = array();
$date = array();
while($rs = mysqli_fetch_array($resultchart)){
$id[] = "\"".$rs['id']."\"";
$A[] = "\"".$rs['A']."\"";
$date[] = "\"".$rs['date']."\"";
}
$id = implode(",", $id);
$A = implode(",", $A);
$date = implode(",", $date);
?>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
<hr>
<p align="center">
<canvas id="myChart1" width="800px" height="300px"></canvas>
<script>
var ctx = document.getElementById("myChart1").getContext('2d');
var myChart1 = new Chart(ctx, {
type: 'line',
data: {
labels: [<?php echo $date;?>
],
datasets: [{
label: 'Data : A',
data: [<?php echo $A;?>
],
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)'
],
borderWidth: 1
},
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
</p>
Tag : PHP, HTML, Google Chrome
Date :
2020-04-30 00:29:19
By :
deatinyfrank
View :
1814
Reply :
3
สะดวก cap ผลลัพธ์ที่เป็นปัญหาหรือไม่ (ทั้งโทรศัพท์และคอม)
ปกติรูปแบบการแสดงผลหรือความสวยงามจะกำหนดที่ CSS
แต่ต้องอ่าน doc ดูว่า chart plugin สามารถกำหนดหรือจัดตำแหน่ง element ผ่าน js หรือไม่ ครับ
https://www.chartjs.org/docs/latest/general/responsive.html
ประวัติการแก้ไข 2020-04-30 12:42:06
Date :
2020-04-30 12:11:43
By :
PhrayaDev
สวัดดีครับ
-ผมต้องการปรับขนาดเส้นภายในกราฟ พอมี code แนะนำไหมครับ
ดังภาพ
Code (PHP)
<script>
$(function () {
$('#container').highcharts({
chart: {
type : 'scatter' //????????? ??????? ??????????????? line ????????
},
title: {
text: ">"//????????
},
yAxis: {
title: {
text: 'Load cell value'
},
},
tooltip: {
enabled: false,
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y ;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -0,
y: 90,
borderWidth: 0
},
code ครับ
Date :
2021-05-20 08:54:42
By :
love
Load balance : Server 03