代码之家 › 专栏 › 技术社区 › wtrdk

无法放大Google图表

google-visualization charts javascript

wtrdk · 技术社区 · 7 年前

我已经创建了一个谷歌图表,可以显示我家的室外温度。数据量不断增长,因此图表在几天内无法读取;-) 我希望能够放大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
     ]);

1 回复 | 直到 7 年前

WhiteHat 7 年前

尝试使用当前库。。。

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

jsapi 根据 release notes ...

通过 jsapi 加载程序不再持续更新。请使用新的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>