ถามเรื่องกราฟหน่อยครับ คือผมจะให้กดปุ่ม+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 04-06-2019 16:12:57

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

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

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

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 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 04-06-2019

ความคิดเห็นที่ 2

พี่ครับ ทำไมมันไม่มีจุดตำเเหน่งก่อนหน้าครับ
มันโดดไปจุดใหม่ตลอด

Golff Sinlapachai 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 04-06-2019

ความคิดเห็นที่ 4

ตรง
function addnum()
function delnum()

ถ้าชนะใช้ตัวบน ถ้าเเพ้ใช้ตัวล่าง
เเต่ถ้าเสมอละครับ ตรง function เราใส่อะไรต่อหรอครับ

 function ............ (){
            _x++;
            _y;
            document.all.txtint.value--;
            dataSet.push([_x,_y]);
            drawChart();
        }

ขอบคุณครับ

Golff Sinlapachai 04-06-2019 17:49

ความคิดเห็นที่ 5

หรือว่าใช้อะไรก็ได้มันเป็นชื่อตัวเเปรรึป่าวครับ

Golff Sinlapachai 04-06-2019 17:54

ความคิดเห็นที่ 6

ตอนกด + ให้จุดเป็นสีเขียว
ตอนกด - ให้เป็นจุดสีเเดง ยังไงครับ
ผมใส่เเล้วมันเป็นสีเดียวหมดเลย

Golff Sinlapachai 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	อ่าน 22,350
ทบทวน การจัดการกับ ตัวแปร array ใน javascript ด้วย ฟังก์ชัน ตอนที่ 2	อ่าน 16,255

ninenik 04-06-2019

ความคิดเห็นที่ 8

ขอบคุณครับ

Golff Sinlapachai 05-06-2019 08:33

ความคิดเห็นที่ 9

ถ้ามีอีกปุ่ม ปุ่มลบ ผมจะลบตำเเหน่งที่ x2,y2 ยังไงครับพี่

Golff Sinlapachai 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 05-06-2019 15:16

1 2 Next

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน