Ionic（2.x/3.x）のズームと詳細

Question

Ionic 3（とangular 4）のモバイルアプリを開発しています。グラフを作成する必要があります。ええ、下の図のように棒グラフのようです。しかし、私は時間当たり、ズーム付きでbarchartが必要です。ユーザーがズームすると、時間をより詳細に表示する必要があります。

誰かがこれをどうやって手助けできますか？

Answer 1

あなたはhighCHartsを使用することができます。

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-v.json&callback=?', function (data) { 
 

 
    // create the chart 
 
    Highcharts.stockChart('container', { 
 
     chart: { 
 
      alignTicks: false 
 
     }, 
 

 
     rangeSelector: { 
 
      selected: 1 
 
     }, 
 

 
     title: { 
 
      text: 'AAPL Stock Volume' 
 
     }, 
 

 
     series: [{ 
 
      type: 'column', 
 
      name: 'AAPL Stock Volume', 
 
      data: data, 
 
      dataGrouping: { 
 
       units: [[ 
 
        'week', // unit name 
 
        [1] // allowed multiples 
 
       ], [ 
 
        'month', 
 
        [1, 2, 3, 4, 6] 
 
       ]] 
 
      } 
 
     }] 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://code.highcharts.com/stock/highstock.js"></script> 
 
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
 

 
<div id="container" style="height: 400px"></div>