изменить размеры Google Charts с внешнего JS - PullRequest
Новая
       10

изменить размеры Google Charts с внешнего JS

0 голосов
/ 12 июня 2018

Я использую диаграммы Google и понимаю, что у него нет возможности автоматически подгонять родительский элемент при изменении размера окна.

Найдены некоторые ответы здесь, и это работает, если диаграмма Google находится на встроенном HTML.Это мой встроенный HTML-скрипт JS.

<script>
            google.charts.load('current', {packages: ['corechart']});
            google.charts.setOnLoadCallback(drawBarChart);
            google.charts.setOnLoadCallback(drawLineChart);

            function drawLineChart(){
                // Define the chart to be drawn.
              var data = new google.visualization.DataTable();


              var timeStamp = [{% for item in labels %}
                             new Date("{{item}}"),
                            {% endfor %}]
              var speed = [{% for item in values.speed %}
                              {{item}},
                            {% endfor %}];
              var soc = [{% for item in values.soc %}
                              {{item}},
                            {% endfor %}];
              var dataArray = [];

              for (i=0;i<timeStamp.length;i++){
                var tempArray = []
                tempArray.push(timeStamp[i])
                tempArray.push(speed[i])
                tempArray.push(soc[i])
                dataArray.push(tempArray)
              }


              data.addColumn('datetime', 'Time of Day');
              data.addColumn('number', 'Speed');
              data.addColumn('number', 'SOC');
              data.addRows(dataArray);

              var options  = {
                legend: { position: 'top', maxLines: 3 }
              }

              // Instantiate and draw the chart.
              var chart = new google.visualization.LineChart(document.getElementById("lineChart"));
              console.log("chart: ", chart);
              chart.draw(data, options);

            }



          $(window).resize(function(){
            drawBarChart();
            drawLineChart();
          });

</script>

Теперь мой вопрос: у меня есть кнопка, которая динамически изменяет данные на графиках, но они находятся на внешнем сценарии JS.Это работает, диаграммы меняются динамически, но когда я изменяю размер, диаграммы будут отображать первый набор данных при первом посещении страницы вместо новой выборки данных при нажатии кнопки.Как мне изменить размеры графиков?

Вот внешний скрипт JS.

$(function() {

  function getResult(timeRange){
    return $.ajax({
      url: "/vehicles/"+ $("#vehicle-name").text() + "/" + timeRange
    });
  }

  function displayCards(energy, mileage) {
    $("#energy").text(energy).hide().fadeIn();
    $("#mileage").text(mileage).hide().fadeIn();
  }

  function drawLineChart(values, labels){
      // Define the chart to be drawn.
    var data = new google.visualization.DataTable();

    console.log(values);

    var speed = values.speed;
    var soc = values.soc;
    var dataArray = [];

    for (i=0;i<labels.length;i++){
      var tempArray = []
      tempArray.push(new Date(labels[i]))
      tempArray.push(speed[i])
      tempArray.push(soc[i])
      dataArray.push(tempArray)
    }

    console.log(dataArray);
    data.addColumn('datetime', 'Time of Day');
    data.addColumn('number', 'Speed');
    data.addColumn('number', 'SOC');
    data.addRows(dataArray);

    var options  = {
      legend: { position: 'top', maxLines: 3 }
    }

    // Instantiate and draw the chart.
    var chart = new google.visualization.LineChart(document.getElementById("lineChart"));
    console.log("chart: ", chart);
    chart.draw(data, options);

  }

  $("#six_hour").click(function() {
    $(this).addClass('active').siblings().removeClass('active');
    getResult("sixhour").done(function(data) {
      let labels = data.time_stamp;
      let values = data.values;
      drawLineChart(values, labels);
    });

  });

});

1 Ответ

0 голосов
/ 12 июня 2018

Использование let делает вашу переменную labels и values локализованной.И, таким образом, вы больше не можете получать новые данные при изменении их размера.

Есть много способов решить их, я не уверен, каковы ваши предпочтения.Однако для удобства я предпочитаю найти место для сохранения нужных мне данных, а не каждый раз звонить.

Я создам место для хранения своих данных, чтобы я мог ссылаться на него при изменении размера. 

var data_obj = new Object();

($(function()
...//other code

$("#six_hour").click(function() {
    $(this).addClass('active').siblings().removeClass('active');
    data_obj.current_button = 'six_hour';
    if (!("sixhour" in data_obj)){
      getResult("sixhour").done(function(data) {
        let labels = data.time_stamp;
        let values = data.values;
        data_obj.six_hour = {labels: labels, values:values}

    });}
    drawLineChart(data_obj.six_hour.values, data_obj.six_hour.labels);
})

$(window).resize(function(){

       drawLineChart(data_obj[data_obj.current_button].values, data_obj[data_obj.current_button].labels);
   });
})

Кроме того, я думаю, что это хорошая идея - перерисовывать график каждый раз, когда вы изменяете размер.В самом деле, если ваш размер данных будет громоздким, он будет отставать.Попробуйте для этого определить некоторый диапазон размеров, например, если размер окна <1000, затем перерисовать и т. Д. </p>

Обновление 13/6/2018

Я выяснил, чтоЯ действительно делаю опечатку после того, как я действительно пишу это ... Хотя я первоначально думаю, что обеспечение идеи достаточно красиво ...

Я пишу JSfiddle , вы можете увидеть после нажатия кнопки вы можете изменить размер диаграммы, используя новые данные.

Если вы не хотите кэшировать данные, просто удалите тег 'six_hour' в объекте, используя 

data_obj = {labels: labels, values:values}

вместо 

data_obj.six_hour = {labels: labels, values:values}

А также удалить if (!("sixhour" in data_obj))

...