Question

我正在使用谷歌图表并意识到它无法在调整窗口大小时自动适合父级。

在这里找到了一些答案，如果谷歌图表是内联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);
    });

  });

});

Answer 1

使用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);
   });
})

此外，我认为每次调整大小时重绘图表都是个好主意。实际上，如果您的数据量很大，则会滞后。尝试定义一些大小范围来执行此操作，例如，如果窗口大小＆lt; 1000，然后重绘等。

更新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))

从外部JS调整Google Charts的大小

1 个答案: