Question

我创建了一个Google图表，可视化我家的室外温度。数据量不断增长，因此图表在几天内变得难以理解;-) 我希望能够放大x轴，但我无法使用explorer选项。我试过了：

explorer: { actions: ["dragToZoom", "rightClickToReset"], 
            maxZoomIn: 0.2,
            maxZoomOut: 1.0,
            zoomDelta: 10,
            axis: "horizontal",
            keepInBounds: true
          },

但这似乎不起作用。

这是我到目前为止所得到的： https://codepen.io/wtrdk/pen/wpGVVW或https://weather.wtrdk.nl/test.html

更新：我添加了以下代码来创建一个连续轴，但我仍然无法放大......

var view = new google.visualization.DataView(data);
  view.setColumns([
    // first column is calculated
    {
      calc: function (dt, row) {
        // convert string to date
        return new Date(dt.getValue(row, 0));
      },
      label: data.getColumnLabel(0),
      type: 'datetime'
    },
    // just use index # for second column
    1
     ]);

Answer 1

尝试使用当前的库...

<script src="https://www.gstatic.com/charts/loader.js"></script>

根据{{3}} ...

，

jsapi已过期

通过jsapi加载程序保留的Google图表版本不再一致更新。请从现在开始使用新的gstatic loader.js。

这只会更改load声明，
请参阅以下工作代码段...

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
  $.get(
    "https://cors-anywhere.herokuapp.com/https://weather.wtrdk.nl/temperature.csv",
    function(csvString) {
      // transform the CSV string into a 2-dimensional array
      var arrayData = $.csv.toArrays(csvString, {
        onParseValue: $.csv.hooks.castToScalar
      });

      // this new DataTable object holds all the data
      var data = new google.visualization.arrayToDataTable(arrayData);
      
       var view = new google.visualization.DataView(data);
  view.setColumns([
    // first column is calculated
    {
      calc: function (dt, row) {
        // convert string to date
        return new Date(dt.getValue(row, 0));
      },
      label: data.getColumnLabel(0),
      type: 'datetime'
    },
    // just use index # for second column
    1
     ]);


      var temperature = new google.visualization.ChartWrapper({
        chartType: "AreaChart",
        containerId: "temperature",
        dataTable: view,
        options: {
          height: 400,
          explorer: {
            actions: ["dragToZoom", "rightClickToReset"],
            //axis: "horizontal",
            //keepInBounds: true
          },
          animation: { duration: 2000, easing: "out", startup: true },
          title: "Temperature",
          titleTextStyle: { color: "grey", fontSize: 11 },
          legend: { textStyle: { color: "grey", fontSize: 11 } },
          backgroundColor: { fill: "transparent" },
          colors: ["#e39c3a"],
          hAxis: {
            textStyle: {
              color: "grey",
              fontSize: 11
            },
            //format: 'datetime',
          },
          vAxis: {
            title: "°C",
            titleTextStyle: {
              color: "grey",
              fontSize: 22
            },
            textStyle: {
              color: "grey",
              fontSize: 11
            }
          }
        }
      });
      temperature.draw();
    }
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://weather.wtrdk.nl/jquery.csv.min.js"></script>
<body bgcolor="#282B30">
  <div id="temperature"></div>
</body>

无法放大Google图表

1 个答案: