PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


ถามเรื่องกราฟหน่อยครับ คือผมจะให้กดปุ่ม+1 เเล้วให้เเสดงที่กราฟครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ถามเรื่องกราฟหน่อยครับ คือผมจะให้กดปุ่ม+1 เเล้วให้เเสดงที่กราฟครับ

ถามเรื่องกราฟหน่อยครับ คือผมจะให้กดปุ่ม+1 เเล้วให้เเสดงที่กราฟครับ
คือจะมีอยู่2ปุ่ม คือปุ่มเพิ่ม+1 กับ ปุ่มลด-1

ถ้าเรากดปุ่มเพิ่ม กราฟจะเเสดง x1,y1  กดอีกทีเป็นx2,y2
เเต่พอเรากดปุ่มลบกราฟจะเเสดงเป็น x3, y1

 เเบบนี้พอจะเขียนยังไงครับ

<html>
<head>

	<!-- ปุ่มบวก/ลบเลข -->
	<script>
		function addnum(){
			document.all.txtint.value  ;
		}
		function delnum(){
			document.all.txtint.value--;
		}
	</script>
	<input name="txtint" type="button" id="txtint1" value="0"/>
	<br>
	<a href="javascript:void(0);" onclick="addnum()"> ++ </a>
	<br>
	<a href="javascript:void(0);" onclick="delnum()"> - - </a>
	<!-- ปุ่มบวก/ลบเลข -->

	<!-- กราฟ -->
	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	<script type="text/javascript">

		google.charts.load('current', {'packages':['corechart']});
		google.charts.setOnLoadCallback(drawChart);
		
		function drawChart() {
			var data = google.visualization.arrayToDataTable([
				['Age', 'Weight'],
				[ 1,   1 ]

				]);

			var options = {
				title: '',
				hAxis: {title: 'รอบที่', minValue: 0, maxValue: 10},
				vAxis: {title: 'ชนะ-เเพ้', minValue: -5, maxValue: 5},
				legend: 'none'
			};

			var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

			chart.draw(data, options);
		}
	</script>
</head>
<body>
<!-- กราฟ -->
	<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>


Golff Sinlapachai 116.58.242.xxx 04-06-2019 16:12:57

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ เข้าใช้งานด้วย Facebook คลิก )
 ความคิดเห็นที่ 1
ลองดูโค้ดตัวอย่างด้านล่างเป็นแนวทาง

<html>
<head>
 
    <!-- ปุ่มบวก/ลบเลข -->
    <script>
        function addnum(){
            _x++;
            _y++;          
            document.all.txtint.value  ;      
            drawChart();
        }
        function delnum(){
            _x++;
            _y--;
            document.all.txtint.value--;
            drawChart();
        }
    </script>
    <input name="txtint" type="button" id="txtint1" value="0"/>
    <br>
    <a href="javascript:void(0);" onclick="addnum()"> ++ </a>
    <br>
    <a href="javascript:void(0);" onclick="delnum()"> - - </a>
    <!-- ปุ่มบวก/ลบเลข -->
 
    <!-- กราฟ -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
 
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
         
      var _x = 0;
      var _y = 0;
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Age', 'Weight'],
                [ _x,   _y ]
 
                ]);
 
            var options = {
                title: '',
                hAxis: {title: 'รอบที่', minValue: 0, maxValue: 10},
                vAxis: {title: 'ชนะ-เเพ้', minValue: -5, maxValue: 5},
                legend: 'none'
            };
 
            var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
 
            chart.draw(data, options);
        }
    </script>
</head>
<body>
<!-- กราฟ -->
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

ตัวอย่าง DEMO

Ninenik 183.88.63.xxx 04-06-2019
 ความคิดเห็นที่ 2
พี่ครับ  ทำไมมันไม่มีจุดตำเเหน่งก่อนหน้าครับ 
มันโดดไปจุดใหม่ตลอด


Golff Sinlapachai 116.58.255.xxx 04-06-2019 17:03
 ความคิดเห็นที่ 3
<html>
<head>
 
    <!-- ปุ่มบวก/ลบเลข -->
    <script>
        function addnum(){
            _x++;
            _y++;          
            document.all.txtint.value  ;  
            dataSet.push([_x,_y]);
            drawChart();
        }
        function delnum(){
            _x++;
            _y--;
            document.all.txtint.value--;
            dataSet.push([_x,_y]);
            drawChart();
        }
    </script>
    <input name="txtint" type="button" id="txtint1" value="0"/>
    <br>
    <a href="javascript:void(0);" onclick="addnum()"> ++ </a>
    <br>
    <a href="javascript:void(0);" onclick="delnum()"> - - </a>
    <!-- ปุ่มบวก/ลบเลข -->
 
    <!-- กราฟ -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
 
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
         
      var _x = 0;
      var _y = 0;
      var dataSet = [['Age', 'Weight'],[_x,_y]];
        function drawChart() {
            var data = google.visualization.arrayToDataTable(dataSet); 
            var options = {
                title: '',
                hAxis: {title: 'รอบที่', minValue: 0, maxValue: 10},
                vAxis: {title: 'ชนะ-เเพ้', minValue: -5, maxValue: 5},
                legend: 'none'
            };
 
            var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
 
            chart.draw(data, options);
        }
    </script>
</head>
<body>
<!-- กราฟ -->
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

ตัวอย่าง DEMO

Ninenik 183.88.63.xxx 04-06-2019
 ความคิดเห็นที่ 4
ตรง  
function addnum() 
function delnum()

ถ้าชนะใช้ตัวบน ถ้าเเพ้ใช้ตัวล่าง
เเต่ถ้าเสมอละครับ ตรง function เราใส่อะไรต่อหรอครับ 
 function ............ (){
            _x++;
            _y;
            document.all.txtint.value--;
            dataSet.push([_x,_y]);
            drawChart();
        }


ขอบคุณครับ


Golff Sinlapachai 116.58.242.xxx 04-06-2019 17:49
 ความคิดเห็นที่ 5
หรือว่าใช้อะไรก็ได้มันเป็นชื่อตัวเเปรรึป่าวครับ


Golff Sinlapachai 116.58.255.xxx 04-06-2019 17:54
 ความคิดเห็นที่ 6
ตอนกด + ให้จุดเป็นสีเขียว
ตอนกด - ให้เป็นจุดสีเเดง ยังไงครับ
ผมใส่เเล้วมันเป็นสีเดียวหมดเลย


Golff Sinlapachai 116.58.242.xxx 04-06-2019 18:46
 ความคิดเห็นที่ 7
ต้องเปลี่ยนรูปแบบข้อมูล

<html>
<head>
  
    <!-- ปุ่มบวก/ลบเลข -->
    <script>
        function addnum(){
            _win++;
            _x++;
            _y++;          
            document.all.txtint.value  ;  
            statusColor = _win==_lose?"blue":"green"; // ถ้าจำนวนชะนเท่ากับแพ้ คือเสมอใช้สีฟ้า
            dataSet.push([_x, _y, 'color:'+statusColor])
            drawChart();
        }
        function delnum(){
            _lose++;
            _x++;
            _y--;
            document.all.txtint.value--;
            statusColor = _win==_lose?"blue":"red"; // ถ้าจำนวนชะนเท่ากับแพ้ คือเสมอใช้สีฟ้า
            dataSet.push([_x, _y, 'color:'+statusColor])
            drawChart();
        }
    </script>
    <input name="txtint" type="button" id="txtint1" value="0"/>
    <br>
    <a href="javascript:void(0);" onclick="addnum()"> ++ </a>
    <br>
    <a href="javascript:void(0);" onclick="delnum()"> - - </a>
    <!-- ปุ่มบวก/ลบเลข -->
  
    <!-- กราฟ -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
  
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
          
        var _x = 0; // เก็บจำนวนรอบ
        var _y = 0; // เก็บผลแพ้ ชนะ
        var _win = 0; // จำนวนรอบที่ชนะ
        var _lose = 0; // จำนวนรอบที่แพ้
        var dataSet = [[0, 0, 'color: blue']]; // ข้อมูลเริ่มต้น
        function drawChart() {
            var data = new google.visualization.DataTable();    
            data.addColumn('number', 'Round'); //จำนวนรอบแข่ง
            data.addColumn('number', 'Result'); // ผลลัพธ์ ชนะสีเขียว แพ้สีแดง เสมอสีฟ้า
            data.addColumn({type: 'string', role: 'style'}); // เก็บรูปแบบการกำหนด style
            if(dataSet.length>0){  // มีข้อมูลหรือไม่
              for(i=0; i<=dataSet.length; i++){ // วนลูปแสดงข้อมูล
                data.addRow(dataSet[i]); // เพิ่มข้อมูล
              }
            }
            var options = {
                title: '',
                hAxis: {title: 'รอบที่', minValue: 0, maxValue: 10},
                vAxis: {title: 'ชนะ-เเพ้', minValue: -5, maxValue: 5},
                legend: 'none'
            };
  
            var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  
            chart.draw(data, options);
        }
    </script>
</head>
<body>
<!-- กราฟ -->
    <div id="chart_div" style="width: 800px; height: 400px;"></div>
</body>
</html>

ตัวอย่าง DEMO

บทความแนะนำที่เกี่ยวข้อง
ทบทวน การจัดการกับ ตัวแปร array ใน javascript ด้วย ฟังก์ชัน ตอนที่ 1อ่าน 12,552
ทบทวน การจัดการกับ ตัวแปร array ใน javascript ด้วย ฟังก์ชัน ตอนที่ 2อ่าน 11,994
Ninenik 122.155.46.xxx 04-06-2019
 ความคิดเห็นที่ 8
ขอบคุณครับ


Golff Sinlapachai 116.58.255.xxx 05-06-2019 08:33
 ความคิดเห็นที่ 9
ถ้ามีอีกปุ่ม ปุ่มลบ ผมจะลบตำเเหน่งที่ x2,y2 ยังไงครับพี่





Golff Sinlapachai 116.58.255.xxx 05-06-2019 15:10
 ความคิดเห็นที่ 10
<html>
<head>

    <!-- ปุ่มบวก/ลบเลข -->
    <script>
        function addnum(){
            _x++;
            _y++;          
            document.all.txtint;  
           statusColor = "green"; 
            dataSet.push([_x, _y, 'color:'+statusColor])
            drawChart();
        }
        function delnum(){
            _x++;
            _y--;
            document.all.txtint;
            statusColor = "red"; 
            dataSet.push([_x, _y, 'color:'+statusColor])
            drawChart();
        }

        function data(){
            _x++;
            _y;
            document.all.txtint;
            statusColor = "blue"; 
            dataSet.push([_x, _y, 'color:'+statusColor])
            drawChart();
        }

      

    </script>

<button type="button" class="btn btn-player btn-lg btn-block" id="addBallBlue" onclick="addnum()" > ชนะ</button>

<button type="button" class="btn btn-player btn-lg btn-block" id="addBallBlue" onclick="data()" > เสมอ</button>

<button type="button" class="btn btn-player btn-lg btn-block" id="addBallBlue" onclick="delnum()" > เเพ้</button>

<button type="button" class="btn btn-player btn-lg btn-block" id="addBallBlue"  > ผิด</button>

   <!--  <input name="txtint" type="button" id="txtint1" value="0"/>
    <br>
    <br>
    <br>
    <a href="javascript:void(0);" onclick="addnum()"> ++ </a>
    <br>
    <br>
    <br>
    <a href="javascript:void(0);" onclick="delnum()"> - - </a>
    <br>
    <br>
    <br>
    <a href="javascript:void(0);" onclick="data()"> == </a> -->
    <!-- ปุ่มบวก/ลบเลข -->

    <!-- กราฟ -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        var _x = 0;
        var _y = 0;
       var dataSet = [[0, 0, 'color: blue']]; // ข้อมูลเริ่มต้น

         function drawChart() {
            var data = new google.visualization.DataTable();    
            data.addColumn('number', 'Round'); //จำนวนรอบแข่ง
            data.addColumn('number', 'Result'); // ผลลัพธ์ ชนะสีเขียว แพ้สีแดง เสมอสีฟ้า
            data.addColumn({type: 'string', role: 'style'}); // เก็บรูปแบบการกำหนด style
            if(dataSet.length>0){  // มีข้อมูลหรือไม่
              for(i=0; i<=dataSet.length; i++){ // วนลูปแสดงข้อมูล
                data.addRow(dataSet[i]); // เพิ่มข้อมูล
              }
            }
            var options = {
                title: '',
                hAxis: {title: 'รอบที่', minValue: 0, maxValue: 20},
                vAxis: {title: 'ชนะ-เเพ้', minValue: -10, maxValue: 10},
                legend: 'none'
            };

            var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

            chart.draw(data, options);
        }
    </script>
</head>
<body>
    <!-- กราฟ -->
    <div id="chart_div" style="width: 1300px; height: 700px;"></div>
</body>
</html>


Golff Sinlapachai 116.58.255.xxx 05-06-2019 15:16
 ความคิดเห็นที่ 11
พี่ครับผมเข้าใจผิดไปนิดหน่อยครับ
ตอนนี้ต้องทำอีกเเบบครับ
คือ
จะมีค่าเข้าคือ ค่าชนะ พอเรากด ปุ่มชนะ ให้กราฟขึ้น x1,y1 
ถ้ามี ค่าชนะเข้ามาอีกเรากด ปุ่มชนะ ให้กราฟขึ้นเป็น x2,y2
ถ้ามี ค่าเเพ้ เข้ามาเรากด ปุ่มเเพ้ กราฟจะขึ้นมาเป็น x3,y3 
เเต่ถ้า มีค่าเเพ้เข้ามา เเล้วเรากด ปุ่มชนะ กราฟจะลงเป็น x4,y2

เขียนประมาณไหนครับ ขอโทษครับตอนเเรกบอกผิดไป
 


Golff Sinlapachai 116.58.255.xxx 05-06-2019 17:54
 ความคิดเห็นที่ 12
ช่วยหน่อยครับบ


Golff Sinlapachai 116.58.255.xxx 06-06-2019 18:42
 ความคิดเห็นที่ 13
ช่วยหน่อยครับบ


Golff Sinlapachai 116.58.255.xxx 07-06-2019 18:47






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ