我的谷歌圖表的X軸和Y軸不能正常顯示

我的json資料是

[{"abcount":7,"classname":"B.E。MECH 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08"，"cid"。 "1"},{"abcount":4,"classname":"B。 E.CIVIL 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08", "cid":"3"}]

<script type="text/javascript"/span>>
$(document).ready(function(){
       var jsonData = [];
      let value;
    $.ajax（{
         
         type: "GET"。
        url: "DayBasedAttendanceCount",
        dataType: 'json',
        success: function(result){
            //console.log(result.data); 
            value=result。
            console.log（value）。
            }
      
    });


google.charts.load('current', {
      packages: ['corechart'] 。
    }).then(function (/span>) {
      

let data1=value;
//console.log(data1 " value"); 
var data = new google.visualization.DataTable（）。
let object=JSON.parse(JSON.stringify(data1)
data.addColumn('string','Classname') 。
     data.addColumn('number','Absent Count') 。
    
      let val=JSON.stringify（物件）。
    console.log（val）。

           let str = val.replace(//g, ' ')。
           console.log（str）。

           var newStr = str.substring(1, str.length-1) 。
      console.log（newStr）。
      newStr = '['/span>   newStr  ']'。
      var json = jQuery.parseJSON( newStr ) 。
      console.log(JSON. stringify(json) " json value") 。
      
      var result1 = [];

      for(var i in value)
          result1.push([value.classname, value.abcount]) 。
      
      data.addRows（result1）。
      console.log（result1）。

     var options = {'title':'學生缺席名單',
                'width':600,
                'height':300, 'height':300.
                
     };
     

      var chart = new google.visualization. BarChart(document.getElementById('chartview')) 。
      chart.draw（data, options）。
      google.visualization.events。 addListener(chart, 'ready', function () {
       throw new Error（'Test Google Error'）。
     });

     //監聽錯誤
     google.visualization.events. addListener(chart, 'error', function (err) {
       //檢查錯誤。
       console.log（err.id, err.message）。

       //洗掉錯誤。
       google.visualization.errors.removeError（err.id）。

       //洗掉所有錯誤。
       google.visualization.errors.removeAll（選項）。
     });
    }); 
});  
            
      </script> 

這些資料是我從mysql獲取的，前端是jsp。 我的谷歌條形圖的圖片看起來像 我的輸出圖片是。 我的輸出圖片是。 我的控制臺輸出是：

[{"abcount":7,"classname":B.E。MECH 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08"，"cid"。 "1"},{"abcount":4,"classname":"B。 E.CIVIL 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08", "cid":"3"]

 [{"abcount":7,"classname":"B.E。MECH 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08"，"cid"。 "1"},{"abcount":4,"classname":"B。 E.CIVIL 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08", "cid":"3"]

{"abcount":7,"classname":B.E。MECH 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08"，"cid"。 "1"},{"abcount":4,"classname":"B。 E.CIVIL 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08","cid":"3"}。

[{"abcount":7, "classname":"B.E。MECH 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08"，"cid"。 "1"},{"abcount":4,"classname":"B。 E.CIVIL 1 YEAR 1 SEM A SEC","datevalue":"2021-09-08","cid":"3"}] json value

 Array(2)

uj5u.com熱心網友回復：

這可以幫助你。如果你喜歡玩代碼，我做了一個fiddle。https://jsfiddle.net/bogatyr77/3w19g2km/28/
HTML:

<div id="myBarChart"/span>/>

JavaScript

$(function(/span>) {
  var value;
  var s = ''/span>;
  $.ajax（{
    cache: false,
    type: 'POST'。
    url: '/echo/json/',
    data: {
      json: '[{"abcount":7, "classname": "B.E. MECH 1 YEAR 1 SEM A SEC", "datevalue": "2021-09-08", "cid": "1"},{"abcount":4, "classname": "B. E.CIVIL 1 YEAR 1 SEM A SEC", "datevalue": "2021-09-08", "cid": "3"}]'/span>
    },
    成功。function(data) {
      值 = 資料
      var data = new google.visualization.DataTable（）。
      data.addColumn('string', 'Element') 。
      data.addColumn('number', 'Count');
      s = '[';

      $.each(value, function(index, v) {
        s  = '["'/span>   v.datevalue   '", '   v.abcount   '],';
      });
      var d = s.slice（0, -1)
      d  = ']'。

      data.addRows(JSON.parse(d))
      
      var options = {'title':'學生缺席名單',
                'width':600,
                'height':300, 'height':300.
                
     };
      var chart = new google.visualization. BarChart（document.getElementById('myBarChart')）。
      chart.draw（data, options）。
    },
    error。function(error) {
      alert('there was an error') 。
    },
    dataType: 'json'。
  });
});

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

標籤：

上一篇：如何在flutter中改變TextFormField提示標簽的背景顏色

下一篇：防止來自URL的跨站腳本攻擊