无法放大Google图表 [英] Not able to zoom in on Google Charts

问题描述

我制作了一张Google Chart，用于显示我家的外部温度。数据量不断增长，因此图表在几天内难以读取;-)
我希望能够在x轴上放大，但我无法让它与 explorer 选项。
我试过了：

  explorer：{actions：[dragToZoom，rightClickToReset]，
 maxZoomIn：0.2，
 maxZoomOut：1.0，
 zoomDelta：10，
 axis：horizo​​ntal，
 keepInBounds：true 
}，
  

但这似乎不起作用。

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

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

  var view = new google.visualization.DataView（data）; 
 view.setColumns（[
 //第一列是计算
 {
 calc：function（dt，row）{
 //将字符串转换为日期
返回新的Date（dt.getValue（row，0））; 
}，
 label：data.getColumnLabel（0），
类型：'datetime'
}，
 //只是使用索引＃作为第二列
 1 
]）; 
  

解决方案

尝试使用当前库...

根据
code $ jsapi developers.google.com/chart/interactive/docs/release_notesrel =nofollow noreferrer>发布说明 ...

通过 jsapi 加载器保持可用的Google Charts的版本不再一致地更新。请从现在起使用新的gstatic loader.js 。

只更改加载语句，

请参阅以下工作片段...

< 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>

I have created a Google Chart that visualises the outside temperature at my house. The amount of data keeps growing, so the chart gets unreadable in a few days ;-) I want to be able to zoom in on the x-axis, but I can't get it to work with the explorer option. I've tried:

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

But that doesn't seem to work.

Here's what I've got so far: https://codepen.io/wtrdk/pen/wpGVVW or https://weather.wtrdk.nl/test.html

UPDATE: I've added the following code to create a continuous axis, but I still can't zoom in...

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
     ]);

解决方案

try using the current library...

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

jsapi is out of date, according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.

this will only change the load statement,
see following working snippet...

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图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！