Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/395.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript数组未填充,因此Google图表未显示数据_Javascript_Arrays_Charts_Google Visualization_Radiobuttonlist - Fatal编程技术网

Javascript数组未填充,因此Google图表未显示数据

Javascript数组未填充,因此Google图表未显示数据,javascript,arrays,charts,google-visualization,radiobuttonlist,Javascript,Arrays,Charts,Google Visualization,Radiobuttonlist,我正在显示一个基于单选按钮选择的数据构建的谷歌图表。在思考过程中,我有一个数组来存储所选的信息,并通过多个选择吐出文本。我的谷歌图表是用来显示有多少人选择了一个特定的项目。我构建了另一个数组来存储图表的数据,但它没有填充。在本例中,它是一个字符类,图表旨在显示有多少人选择了特定的类 如果您想了解我的意思,这里是指向该项目的github链接: 收音机选择的剪报: <p><span class="h2-class">Class</span></p&g

我正在显示一个基于单选按钮选择的数据构建的谷歌图表。在思考过程中,我有一个数组来存储所选的信息,并通过多个选择吐出文本。我的谷歌图表是用来显示有多少人选择了一个特定的项目。我构建了另一个数组来存储图表的数据,但它没有填充。在本例中,它是一个字符类,图表旨在显示有多少人选择了特定的类

如果您想了解我的意思,这里是指向该项目的github链接:

收音机选择的剪报:

    <p><span class="h2-class">Class</span></p>
          <label for="cleric">
            <input type="radio" id="cleric" name="memberClass" 
              </label>
          <label for="paladin">
            <input type="radio" id="paladin" name="memberClass" 
value="Paladin">Paladin
          </label>
          <label for="rogue">
            <input type="radio" id="rogue" name="memberClass" 
value="Rogue">Rogue
          </label>
          <label for="ranger">
            <input type="radio" id="ranger" name="memberClass" 
value="Ranger">Ranger
          </label>
          <label for="fighter">
            <input type="radio" id="fighter" name="memberClass" 
value="Fighter">Fighter
          </label>
          <label for="wizard">
            <input type="radio" id="wizard" name="memberClass" value="Wizard">Wizard
          </label>


dataChart[tasks[i].成员]++看起来可疑。dataChart是一个数组,因此您必须通过(数字)索引访问它。tasks[i]看起来不存在,因为tasks是一个对象,它唯一的属性是members。嗯,我认为你完全正确,我知道其中一个数组有问题,但就是无法锁定它。我先从表单中写出输出,然后添加图表,希望能够根据我已有的数据进行构建。
  var classes = [
  "Paladin",
  "Cleric",
  "Ranger",
  "Rogue",
  "Fighter",
  "Wizard"
];

window.onload = function() {

  function buildChart(tasks) {

      var dataChart = [];

        for (var x = 0; x < classes.length; x++){
          dataChart.push(0);
          }
          // loop through and get data for the tasks array
          for (var i = 0; i < tasks.length; i++) {
            dataChart[tasks[i].members]++;
          }
          // build the array for our chart
          var rows = new Array ();
          for (var y = 0; y < dataChart.length; y++) {
            rows.push( [classes[y], dataChart[y]] );
          }
          console.log(rows);
    // Load the Visualization API and the corechart package.
    google.charts.load (
      'current',
      {'packages': ['corechart']
    });

    // Set a callback to run when the Google Visualization API is 
loaded.
    google.charts.setOnLoadCallback(drawChart);

    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Class');
      data.addColumn('number', 'Chosen');
      data.addRows(rows);

      // Set chart options
      var options = {
        title:'Chosen',
        hAxis: {
          title: 'Whats in play'
        },
        vAxis: {
          title: 'Class'
        }
      };

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.ColumnChart (
        document.getElementById('chart_div'));

        chart.draw(data, options);
    };
  }

  // create an object array for our selections
  var tasks = {
    members: [

  ]};
  // creates the unordered list for output
  function formData () {
    var teamList = document.getElementById("team-list")
    // reset the page - not working ask why
    // document.getElementsByTagName("form").reset();

    var ul = document.createElement("ul")
      for(var i = 0; i < tasks.members.length; i++) {
        console.log(tasks.members[i])

        var li = document.createElement("li");
          li.innerHTML = tasks.members[i]
          // append the li to the ul elements
          ul.appendChild(li)
        }
        // append the ul to the parent div
        teamList.appendChild(ul)

        buildChart(tasks);
      }

  document.forms["letsPlay"].onsubmit = addList;
  function addList () {
    event.preventDefault();
    // locate form section and find our values
    // lets use querySelector since there is only one form
    var form = document.forms["letsPlay"];
    var selection = form["memberClass"].value;
    console.log(selection);
    // our task in this case is player selection for our team, input 
our values
    var taskMember = form.teamMember.value + "\xa0has chosen to be 
the\xa0" + form.memberClass.value + "\xa0for your party and has 
requested difficulty\xa0" + 
document.getElementById("difficulty").value;
    // push selection to our array
    tasks.members.push(taskMember);
    formData();

    form.reset();
  }
}