Изменение оси x диаграммы Google с помощью переключателей - PullRequest
Новая
       55

Изменение оси x диаграммы Google с помощью переключателей

1 голос
/ 26 мая 2020

Я хочу включить линейные диаграммы на свой сайт, и я пытаюсь изменить ось 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' of undefined».

1 Ответ

1 голос
/ 26 мая 2020

попробуйте разобрать строку на объект ... 

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

EDIT

вам также необходимо обернуть все ключи объекта и строковые значения в двойные кавычки "
вы можете использовать одинарные кавычки для атрибута значения

см. следующий тестовый фрагмент ... 

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