使用单选按钮更改 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>

我得到的错误是 "Cannot read property 'count' of undefined"。

Answer 1

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

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

编辑

您还需要用双引号将所有对象键和字符串值括起来"
您可以对值属性使用单引号

请参阅以下测试片段...

var radio_d1 = document.getElementById('d1');
console.log(JSON.parse(radio_d1.value));

<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>

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

Changing x-axis of google chart with radio buttons

javascript

charts

google-visualization