使用Ionic（2.x / 3.x）缩放图表并在图表中显示

Question

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

有人可以帮我解决这个问题吗？

Answer 1

您可以使用highCHarts：

＆＃13;

＆＃13;

$.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]
                ]]
            }
        }]
    });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;