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

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

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


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


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

 ความคิดเห็นที่ 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อ่าน 18,750
ทบทวน การจัดการกับ ตัวแปร array ใน javascript ด้วย ฟังก์ชัน ตอนที่ 2อ่าน 14,532
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
1 2 Next






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