Saya ingin mengisi Google Chart dengan data dari fungsi saya. Saya juga mendefinisikan baris header, tetapi yang saya dapatkan adalah "Column header row must be an array.". Bagaimana saya bisa memperbaikinya? Saya menggunakan kode berikut.

    var data_coll = "";
    var header_x = "['Skill', 'Scoring']";
    data_coll += header_x+',';
    if (skill_info["category"]==="gCSC")
    {
      qcat = 'gCSC';
      for (var x = 0;x<skill_info["data"].length;x+=1)
      {
        ind_name = skill_info["data"][x]["fn"]+" "+skill_info["data"][x]["ln"];
        if ((x<skill_info["data"].length) && (x>0))
        {
          data_coll += ",";
        }
        data_coll += "['"+ind_name+"',"+skill_info["data"][x]["value"]+"]";
      }
      drawChart(data_coll);

Saya juga mencoba var header_x = ['Skill', 'Scoring']; dan var header_x = array('Skill', 'Scoring';

DrawChart adalah fungsi yang saya panggil untuk menggambar grafik dengan data_call memasukkan data untuk arrayToDataTable() di dalamnya.

Pembaruan: Saya sudah mendapat solusi WhiteHats yang tampaknya baik-baik saja (kesalahannya hilang). Jadi saya sekarang melihat "Kesalahan: Wadah tidak ditentukan". Ini seharusnya tidak terjadi. Saya menggunakan struktur berikut:

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <div class='elm_emprat pl-3' id="pollingstation"> 
          <div class='btn-group' role='group' aria-label='Basic example'>
            <div  aria-label='Basic example'>
              <div class='btn-group btn-group-toggle' data-toggle='buttons' role='group' id="polloptions">

              </div>
            </div>
          </div> 
      </div>
    </form>   
  </div>  
</div>

Dan saya mengatur yang berikut

var chart = new google.visualization.BarChart(document.getElementById('polloptions'));

Jadi elemennya didefinisikan. Mungkin saya melewatkan sesuatu?

Pembaruan 2: Fungsi untuk menentukan Google Chart

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

// Draw the chart and set the chart values
function drawChart(data_coll) {
      var data = google.visualization.arrayToDataTable([
        data_coll
      ]);

      var options = {
        title: 'Company Skill Comparison',
        chartArea: {width: '50%'},
        width: '100%',
        height: '75%',
        colors: ['#343a40'],
        backgroundColor: { fill:'transparent' },
        hAxis: {
          title: 'Scoring',
          minValue: 0,
          viewWindow: {
            max:100,
            min:0
          }
        },
        vAxis: {
          title: 'Skill'
        }
      };

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.BarChart(document.getElementById('polloptions'));
  chart.draw(data, options);
}

Dan sukses besarFungsi di mana semuanya tentang bagian gCSC.

function successHandler(data)
{
      console.log(data);
      var skill_info = JSON.parse(data);
      if ((skill_info.status === 1) && (skill_info.category === "cp") && (skill_info.code === 200)) {
        console.log(skill_info)
        console.log("success loading");                
        //var x,y,dsb,data_coll,ind_name,skill_info,qt,qtx,q_set,q_options='';
        for(var x = 0;x<skill_info["data"].length;x+=1)
        {
        var qt = "<div class='pb-3'><h1 class='display-5' data-panel='cp' id='question_text_"+x+"'>"+skill_info["data"][x]["question_text"]+"</h1></div>";
        console.log(skill_info["data"][x]["question_text"]);
        var option_y = '';
          for(var y = 0;y<skill_info["data"][x]["options"].length;y+=1)
          {             
            option_y += "<label class='btn btn-outline-dark'><input type='radio'  name='options_"+skill_info["data"][x]["id"]+"' value='"+skill_info["data"][x]["options"][y]["answer_value"]+"' autocomplete='off'>"+skill_info["data"][x]["options"][y]["answer"]+"</label>";
            console.log(skill_info["data"][x]["options"][y]["answer_value"]);            
          }
          var q_options = '<div class="btn-group btn-group-toggle" data-toggle="buttons" role="group" id="polloptions">'+option_y+'</div>';
          option_y = '';
          if(x==0)
          {
            dsb = " style='display:block' ";
          }
          else
          {
            dsb = " style='display:none' ";
          }
          document.getElementById("pollingstation").innerHTML += "<div class='elm_emprat pl-3 elm_x_"+x+"' id='pollingstation' "+dsb+">"+qt+q_options+"</div>"; 
        }
      }
      else if((skill_info.status === 1) && (skill_info.category !== "cp") && (skill_info.code === 200))
      {
        console.log(skill_info)
        console.log("success loading");                
        var data_coll = [['Skill', 'Scoring']];

        if(skill_info["category"]==="gCSC")
        {
          qcat = 'gCSC';
          skill_info["data"].forEach(function (row) {
            data_coll.push([row["fn"] + " " + row["ln"], row["value"]]);
          });


          console.log(data_coll);
          drawChart(data_coll);
          qtx = "Top "+skill_info["data"][0]["skill"]+" Skillers @ "+skill_info["data"][0]["name"];
          q_set = '<div class="btn-group btn-group-toggle" data-toggle="buttons" role="group" id="polloptions">'+data_coll+'<button class="sbmt_frm">Next</button></div>';          
        }
        else if (skill_info["category"]==="gRU")
        {
          qcat = 'gRU';          
          qtx = "How do you rate "+skill_info["data"][0]["first_name"]+" "+skill_info["data"][0]["last_name"]+"'s "+skill_info["data"][0]["skill"]+" skill?";
          q_options = "<label class='btn btn-outline-dark'><input type='radio' name='options_"+skill_info["data"][0]["id"]+"_"+skill_info["data"][0]["skill_id"]+"' value='1' autocomplete='off'>0-20</label>";
          q_options += "<label class='btn btn-outline-dark'><input type='radio' name='options_"+skill_info["data"][0]["id"]+"_"+skill_info["data"][0]["skill_id"]+"' value='2' autocomplete='off'>21-40</label>";
          q_options += "<label class='btn btn-outline-dark'><input type='radio' name='options_"+skill_info["data"][0]["id"]+"_"+skill_info["data"][0]["skill_id"]+"' value='3' autocomplete='off'>41-60</label>";          
          q_options += "<label class='btn btn-outline-dark'><input type='radio' name='options_"+skill_info["data"][0]["id"]+"_"+skill_info["data"][0]["skill_id"]+"' value='4' autocomplete='off'>61-80</label>";
          q_options += "<label class='btn btn-outline-dark'><input type='radio' name='options_"+skill_info["data"][0]["id"]+"_"+skill_info["data"][0]["skill_id"]+"' value='5' autocomplete='off'>81-100</label>";  
          q_set = '<div class="btn-group btn-group-toggle" data-toggle="buttons" role="group" id="polloptions">'+q_options+'<button class="sbmt_frm">Next</button></div>';
        }
        else if (skill_info["category"]==="gSC")
        {
          qcat = 'gSC';          
          qtx = "Your most recent skill changes";
          q_set = "<button class='sbmt_frm'>Next</button>";
        }    
        else if (skill_info["category"]==="gPM")
        {
          qcat = 'gPM';
          qtx = "Do you know "+skill_info["data"]["first_name"]+" "+skill_info["data"]["last_name"]+" ("+skill_info["data"]["position"]+" @ "+skill_info["data"]["company_name"]+")";
          q_options = "<label class='btn btn-outline-dark'><input type='radio' name='options_"+skill_info["data"]["id"]+"' value='2' autocomplete='off'>Yes</label>";
          q_options += "<label class='btn btn-outline-dark'><input type='radio' name='options_"+skill_info["data"]["id"]+"' value='1' autocomplete='off'>No</label>";          
          q_set = "<div class='btn-group btn-group-toggle' data-toggle='buttons' role='group' id='polloptions'>"+q_options+"<button class='sbmt_frm'>Next</button></div>";
        }               
        var qt = "<div class='pb-3'><h1 class='display-5' id='question_text_0' data-panel='"+qcat+"'>"+qtx+"</h1></div>";
        document.getElementById("pollingstation").innerHTML += "<div class='elm_emprat pl-3 elm_x_"+x+"' id='pollingstation'>"+qt+q_set+"</div>"; 

      }
      else {
         console.log(skill_info);
         console.log("failure loading");
      }  
}

Sunting

Contoh output satu baris:

[["Skill","Scoring"],["Jim","3.00"]]

Contoh keluaran multi-baris:

[["Skill","Scoring"],["Jim","3.00"],["Reid","5.16"],["Akshay","6.00"]]
1
nucky 18 Mei 2020, 17:01

1 menjawab

Jawaban Terbaik

Seluruh kumpulan data harus berupa larik,
dan setiap baris kumpulan data harus berupa larik...

Kumpulan data harus mirip dengan ...

[
  ['Skill', 'Scoring'],
  ['name', 10],
]

Dan jika Anda menggunakan javascript, tidak perlu membuat string,
hanya membangun array secara langsung ...

var data_coll = [['Skill', 'Scoring']];
if(skill_info["category"]==="gCSC")
{
  qcat = 'gCSC';
  skill_info["data"].forEach(function (row) {
    data_coll.push([row["fn"] + " " + row["ln"], row["value"]]);
  });
  drawChart(data_coll);

  ...

EDIT

Tampaknya fungsi drawChart dipanggil dari pernyataan beban google,
sebelum fungsi successHandler selesai membangun konten, di sini...

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

// Draw the chart and set the chart values
function drawChart(data_coll) {
  ...

Karena grafik google hanya perlu dimuat sekali per pemuatan halaman,
Saya suka memuatnya terlebih dahulu, sebelum hal lain di halaman.
selain itu, pernyataan load google akan menunggu dokumen dimuat,
sebelum memanggil fungsi panggilan balik.
jadi ini menggantikan kebutuhan akan fungsi $(document).ready jquery,
atau fungsi window.addEventListener('load', ... standar.

Hal lain, pernyataan load mengembalikan janji,
yang dapat digunakan sebagai pengganti setOnLoadCallback.

Coba muat google chart dulu, sebelum yang lain.
dan ketika janji kembali, panggil fungsi yang memuat data dan jalankan pengendali sukses.

google.charts.load('current', {
  packages:['corechart']
}).then(function () {  // this is the promise function to replace the callback

  // call function that loads the data here
  $.ajax or whatever...

});

Maka fungsi drawChart Anda akan dipanggil di pengendali sukses,
setelah konten dibuat.


Catatan: jika Anda menggunakan BarChart...

google.visualization.BarChart

Maka Anda tidak perlu memuat paket 'bar', cukup paket 'corechart'.

'bar' adalah untuk bagan batang material mereka...

google.charts.Bar

EDIT 2

Karena kita sedang membangun sebuah array dari array,
tidak perlu menyertakan array awal di sini...

  var data = google.visualization.arrayToDataTable([
    data_coll
  ]);

Mengubah...

  var data = google.visualization.arrayToDataTable(data_coll);

EDIT 3

Data yang disediakan tampaknya berfungsi dengan baik di sini,
setelah menghapus tanda kutip dari nilai angka...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  drawChart([["Skill","Scoring"],["Jim",3.00],["Reid",5.16],["Akshay",6.00]]);
});

function drawChart(data_coll) {
  var data = google.visualization.arrayToDataTable(data_coll);

  var options = {
    title: 'Company Skill Comparison',
    chartArea: {width: '50%'},
    width: '100%',
    height: '75%',
    colors: ['#343a40'],
    backgroundColor: { fill:'transparent' },
    hAxis: {
      title: 'Scoring',
      minValue: 0,
      viewWindow: {
        max:100,
        min:0
      }
    },
    vAxis: {
      title: 'Skill'
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('polloptions'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="polloptions"></div>
1
WhiteHat 20 Mei 2020, 11:07