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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<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

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

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


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


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

 ความคิดเห็นที่ 1
ลองดูโค้ดตัวอย่างด้านล่างเป็นแนวทาง

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<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 เราใส่อะไรต่อหรอครับ 
1
2
3
4
5
6
7
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
ต้องเปลี่ยนรูปแบบข้อมูล

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<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,610
ทบทวน การจัดการกับ ตัวแปร array ใน javascript ด้วย ฟังก์ชัน ตอนที่ 2อ่าน 16,449
ninenik 04-06-2019
 ความคิดเห็นที่ 8
ขอบคุณครับ


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





Golff Sinlapachai 05-06-2019 15:10
 ความคิดเห็นที่ 10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<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
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ