Question

我有一个附加到按钮的谷歌可视化线图。单击该按钮时，图表范围和数据值将更改为不同的数据数组（您可以在下面的代码中看到）。

但是，在最后一个数据集（年）上，如果数据集中只有一年的值，则范围很疯狂。

到目前为止，我已尝试使用hAxis minValue和maxValue更改主选项声明中的值，但这会导致错误。我也尝试通过按钮动态更改值，就像我使用图表标题一样。这不会引发错误但它也不起作用。我不确定下一步该尝试什么。

代码：

  var options = {
    vAxis: {title: "Usage" },
    hAxis: {title: "Time" },
    animation:{
      duration: 1000,
      easing: 'out'
    }
  };

  var current = 0;
  var chart_title = 'Usage by Day';
  // Create and draw the visualization.
  var chart = new google.visualization.LineChart(document.getElementById('example2-visualization'));
  var button = document.getElementById('b1');
  function drawChart() {
     // Disabling the button while the chart is drawing.
    button.disabled = true;
    google.visualization.events.addListener(chart, 'ready',
        function() {
          if(current == 0){
                 button.innerHTML = 'Switch to Week';
                 chart_title = 'Usage by Week';
                 csv_element.href = link_usage_day;
                 usage_average_text.innerHTML = "You use a daily average of {{ calc_days_avg }} containers of {{ container }} ";
          }
         else if(current == 1){
                 button.innerHTML = 'Switch to Month';
                 chart_title = 'Usage by Month';
                 csv_element.href = link_usage_week;
                 usage_average_text.innerHTML = "You use a weekly average of {{ calc_weeks_avg }} containers of {{ container }}";
          }
          else if(current == 2){
                 button.innerHTML = 'Switch to Year';
                 chart_title = 'Usage by Year';
                 csv_element.href = link_usage_month;
                 usage_average_text.innerHTML = "You use a monthly average of {{ calc_months_avg }} containers of {{ container }}";
          }
          else if(current == 3){
                 button.innerHTML = 'Switch to Day';
                 chart_title = 'Usage by Day';
                 csv_element.href = link_usage_year;
                 usage_average_text.innerHTML = "You use a yearly average of {{ calc_years_avg }} containers of {{ container }}";
          } 
        });
    options['title'] = chart_title;    

    chart.draw(dataholder[current], options);
    button.disabled = false;
  }
  drawChart();

  button.onclick = function() {
    current = current + 1;
    if(current == 4) current = 0;
    drawChart();
  }
}

Answer 1

Here是Google自定义的轴自定义文档。另外，请确保将日期数据作为日期时间发送，而不是作为utc或int或其他任何内容发送。

    data.addColumn('datetime');
    data.addColumn('number');

    $.each(res.list, (k,v) => {
      data.addRow([new Date(v.dt_txt), v.main.temp]);
    });

更改Google可视化线图的水平轴上的范围

1 个答案: