缩放和Ionic（2.x/3.x）图表中的细节

Question

我正在开发一个带有Ionic 3（和角度4）的移动应用程序，并且我需要做一些图表。嗯，它好像是条形图，如下图所示。但是我需要每小时一个条形图，并且需要放大。当用户放大时，我应该更详细地显示时间。

有人可以帮助我如何做到这一点？

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>