使用单选按钮更改Google图表的x轴

Question

我想在自己的网站上包含折线图，并且我试图使用单选按钮以交互方式更改x轴。我正在尝试通过单选按钮的值执行此操作，但是它被视为字符串，而不是对象。我对JavaScript的经验很少，因此，感谢您的帮助。

          function drawChart(){
          $.get("sn.csv", function(csvString){
          var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
          var removeRows = 1;
          while (removeRows--) {
            arrayData.shift();
          }
          var data = new google.visualization.arrayToDataTable(arrayData);
          var view = new google.visualization.DataView(data);
          view.setColumns([0,5]);
          var chart = new google.visualization.LineChart(document.getElementById("chartContainer"));

          var options = {
              title: "Battery State of Charge (7 days)",
              vAxis: {title: "Charge Level (in Percentage)", minValue:0, maxValue:100},
              legend: 'none'
          };

          var hax = document.getElementsByName('daterange');
          var def = null;
          for (var i=0; i<hax.length;i++){
            hax[i].addEventListener('click', draw1, false);
            if (hax[i].checked){
              def= hax[i];
            }
          }

          if ((def === null) && (hax.length > 0)) {
            def = hax[0];
            def.checked = true;
          }

          draw1({target:def});

          function draw1(sender){
            options.hAxis= null;
            if (sender.target.value !== "{ticks: [{v: 1, f: '00:00'}, {v: 40, f: '04:00'}, {v: 80, f: '08:00'}, {v:120, f: '12:00'}, {v: 160, f: '16:00'}, {v: 180, f: '20:00'}, {v: 200, f: '24:00'}]}") {
              options.hAxis = sender.target.value;
              }
              chart.draw(view, options);
          }

        });
      }

          <div class="menuSide">    
          <input type="radio" id="d1" name="daterange" value="{ticks:[{v: 1, f: '00:00'}, {v: 40, f: '04:00'}, {v: 80, f: '08:00'}, {v:120, f: '12:00'}, {v: 160, f: '16:00'}, {v: 180, f: '20:00'},
                              {v: 200, f: '24:00'}]}"> <label for="d1">24 hours</label><br> 
          <input type="radio" id="d2" name="daterange" value="{ticks:[{v: 1, f: '00:00'}, {v: 40, f: '08:00'}, {v: 80, f: '16:00'}, {v:120, f: '24:00'}, {v: 160, f: '8:00'}, {v: 180, f: '16:00'},
                              {v: 200, f: '24:00'}]}"> <label for="d2">2 days</label><br> 
          <input type="radio" id="d3" name="daterange" value="{ticks:[{v: 1, f: 'Day 1'}, {v: 40, f: 'Day 2'}, {v: 80, f: 'Day 3'}, {v:120, f: 'Day 4'}, {v: 160, f: 'Day 5'}, {v: 180, f: 'Day 6'},
                              {v: 200, f: 'Day 7'}]}"> <label for="d3">7 days</label><br> 
          </div>

我得到的错误是“无法读取未定义的属性'count'”。

Answer 1

尝试将字符串解析为对象...

options.hAxis = JSON.parse(sender.target.value);