Google Chartsを拡大できません

私の家の外気温度を可視化するGoogle Chartを作成しました。データの量が増え続けるので、数日でグラフが読めなくなります;-) x軸を拡大したいのですが、explorerオプションでは動作しません。私は試しました：Google Chartsを拡大できません

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

UPDATE：こちらを

は、私がこれまで持っているものです

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

出典

2017-12-20 wtrdk

...
が作業スニペットを以下を参照してください、load文を変更します - codepenに離散軸（文字列値）があります – WhiteHat

私の更新を見てください。私は連続に変換しましたが、私はまだズームできません。 – wtrdk

は...現在のライブラリを使用して

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

を試してみてくださいjsapiは... release notesによると、古くなっている

一貫して更新されなくなったjsapiローダーを介して利用可能残っていないGoogleのチャートのバージョン。これからは新型のloader.jsを使用してください。

これだけexplorer`のみ（例えば数値や日付など）連続軸と連動 `

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>

出典

2017-12-24 21:13:03 WhiteHat

ありがとう、これは私が探しているものです！ハッピーホリデー！ ;-) – wtrdk

Google Chartsを拡大できません

答えて

関連する問題