Прикрепите ось Y на графике Google в одном месте - PullRequest
1 голос
/ 04 ноября 2019

Я использую диаграмму / график Google в веб-обозрении для своего кода iOS / Objective c. Но данные, которые у меня есть, слишком длинные, поэтому они прокручиваются относительно всех значений. Но ось Y слишком прокручивается с данными, поэтому трудно определить значения в более поздней части. Можно ли как-нибудь сделать ось Y статичной, которая не будет прокручиваться так долго, как значения на оси x. После одного предложения я попробовал использовать фильтр диапазона, но HTML работает в веб-браузере, но я не могу нажать на диапазон фильтра на устройстве iPhone.

Ниже приведен пример HTML

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

        <script type="text/javascript">
            google.load('visualization', '1', {packages: ['controls']});
            google.charts.load('current', {'packages':['line']});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {

                var data = new google.visualization.DataTable();
                data.addColumn('datetime', 'date');
                data.addColumn('number', 'foo');
                data.addRows([
                              [new Date(2019,9,01,00,00,02),31.620001],
                              [new Date(2019,9,01,01,00,28),31.520000],
                              [new Date(2019,9,01,02,00,22),30.320000],
                              [new Date(2019,9,01,03,00,18),31.200001],
                              [new Date(2019,9,01,04,00,18),29.500000],
                              [new Date(2019,9,01,05,00,14),27.500000],
                              [new Date(2019,9,01,06,00,40),27.059999],
                              [new Date(2019,9,01,07,00,05),26.750000],
                              [new Date(2019,9,01,08,00,05),26.070000],
                              [new Date(2019,9,01,09,00,24),25.750000],
                              [new Date(2019,9,01,10,00,49),25.299999],
                              [new Date(2019,9,01,11,00,14),24.129999],
                              [new Date(2019,9,01,12,03,15),22.379999],
                              [new Date(2019,9,01,13,00,29),21.980000],
                              [new Date(2019,9,01,14,01,24),21.820000],
                              [new Date(2019,9,01,15,02,52),21.250000],
                              [new Date(2019,9,01,16,00,08),19.450001],
                              [new Date(2019,9,01,17,00,06),18.879999],
                              [new Date(2019,9,01,18,00,30),18.660000],
                              [new Date(2019,9,01,19,00,23),17.910000],
                              [new Date(2019,9,01,20,01,51),17.040001],
                              [new Date(2019,9,01,21,00,14),16.430000],
                              [new Date(2019,9,01,22,01,08),16.730000],
                              [new Date(2019,9,01,23,00,30),16.450001],
                              [new Date(2019,9,02,00,00,23),16.400000],
                              [new Date(2019,9,02,01,00,15),16.080000],
                              [new Date(2019,9,02,02,00,41),15.300000],
                              [new Date(2019,9,02,03,00,36),14.540000],
                              [new Date(2019,9,02,04,00,00),13.970000],
                              [new Date(2019,9,02,05,00,24),13.650000],
                              [new Date(2019,9,02,06,01,20),13.160000],
                              [new Date(2019,9,02,07,00,09),12.710000],
                              [new Date(2019,9,02,08,02,08),12.650000],
                              [new Date(2019,9,02,09,00,22),12.660000],
                              [new Date(2019,9,02,10,00,18),12.420000],
                              [new Date(2019,9,02,11,00,09),12.470000],
                              [new Date(2019,9,02,12,00,39),12.350000],
                              [new Date(2019,9,02,13,00,31),12.180000],
                              [new Date(2019,9,02,14,00,25),11.880000],
                              [new Date(2019,9,02,15,00,25),11.680000],
                              [new Date(2019,9,02,16,01,21),11.430000],
                              [new Date(2019,9,02,17,00,39),10.770000],
                              [new Date(2019,9,02,18,00,38),10.200000],
                              [new Date(2019,9,02,19,00,01),10.820000],
                              [new Date(2019,9,02,20,02,02),11.490000],
                              [new Date(2019,9,02,21,00,22),12.670000],
                              [new Date(2019,9,02,22,00,15),12.870000],
                              [new Date(2019,9,02,23,00,11),12.660000],
                              [new Date(2019,9,03,00,00,37),12.710000],
                              [new Date(2019,9,03,01,00,01),11.730000],
                              [new Date(2019,9,03,02,01,27),11.310000],
                              [new Date(2019,9,03,03,00,49),11.010000],
                              [new Date(2019,9,03,04,00,10),10.550000],
                              [new Date(2019,9,03,05,00,04),9.910000],
                              [new Date(2019,9,03,06,01,01),9.690000],
                              [new Date(2019,9,03,07,00,24),9.540000],
                              [new Date(2019,9,03,08,02,22),9.330000],
                              [new Date(2019,9,03,09,00,09),9.210000],
                              [new Date(2019,9,03,10,01,02),9.210000],
                              [new Date(2019,9,03,11,01,27),9.230000],
                              [new Date(2019,9,03,12,00,45),9.340000],
                              [new Date(2019,9,03,13,00,38),9.390000],
                              [new Date(2019,9,03,14,12,35),9.530000],
                              [new Date(2019,9,03,15,02,55),9.490000],
                              [new Date(2019,9,03,16,02,18),9.620000],
                              [new Date(2019,9,03,17,00,03),9.780000],
                              [new Date(2019,9,03,18,00,01),9.630000],
                              [new Date(2019,9,03,19,00,58),9.810000],
                              [new Date(2019,9,03,20,00,20),10.200000],
                              [new Date(2019,9,03,21,00,47),10.910000],
                              [new Date(2019,9,03,22,00,12),11.890000],
                              [new Date(2019,9,03,23,00,10),12.260000],
                              [new Date(2019,9,04,00,00,06),12.920000],
                              [new Date(2019,9,04,01,00,39),14.690000],
                              [new Date(2019,9,04,02,00,29),12.840000],
                              [new Date(2019,9,04,03,00,23),12.830000],
                              [new Date(2019,9,04,04,00,19),10.750000],
                              [new Date(2019,9,04,05,00,18),9.530000],
                              [new Date(2019,9,04,06,03,46),9.050000],
                              [new Date(2019,9,04,07,01,01),8.870000],
                              [new Date(2019,9,04,08,01,23),8.650000],
                              [new Date(2019,9,04,09,00,45),8.480000],
                              [new Date(2019,9,04,10,00,04),8.090000],
                              [new Date(2019,9,04,11,01,31),7.930000],
                              [new Date(2019,9,04,12,02,58),7.790000],
                              [new Date(2019,9,04,13,01,17),7.630000],
                              [new Date(2019,9,04,14,01,39),7.630000],
                              [new Date(2019,9,04,15,02,36),7.540000],
                              [new Date(2019,9,04,16,04,31),7.470000],
                              [new Date(2019,9,04,17,00,12),7.480000],
                              [new Date(2019,9,04,18,08,27),7.790000],
                              [new Date(2019,9,04,19,02,32),6.420000],
                              [new Date(2019,9,04,20,00,49),8.860000],
                              [new Date(2019,9,04,21,01,45),9.530000],
                              [new Date(2019,9,04,22,01,39),9.980000],
                              [new Date(2019,9,04,23,00,01),10.190000],
                              [new Date(2019,9,05,00,00,57),10.430000],
                              [new Date(2019,9,05,01,00,20),11.670000],
                              [new Date(2019,9,05,02,01,19),11.540000],
                              [new Date(2019,9,05,03,01,42),11.130000],
                              [new Date(2019,9,05,04,02,39),10.350000],
                              [new Date(2019,9,05,05,10,22),9.460000],
                              [new Date(2019,9,05,06,01,20),9.110000],
                              [new Date(2019,9,05,07,01,11),8.770000],
                              [new Date(2019,9,05,08,00,32),7.920000],
                              [new Date(2019,9,05,09,03,41),6.630000],
                              [new Date(2019,9,05,10,01,21),7.200000],
                              [new Date(2019,9,05,11,01,44),8.100000],
                              [new Date(2019,9,05,12,00,01),8.640000],
                              [new Date(2019,9,05,13,00,59),8.710000],
                              [new Date(2019,9,05,14,00,23),8.900000],
                              [new Date(2019,9,05,15,00,21),8.760000],
                              [new Date(2019,9,05,16,00,18),8.420000],
                              [new Date(2019,9,05,17,01,49),8.320000],
                              [new Date(2019,9,05,18,00,06),8.510000],
                              [new Date(2019,9,05,19,00,39),8.910000],
                              [new Date(2019,9,05,20,01,06),9.190000],
                              [new Date(2019,9,05,21,00,29),9.150000],
                              [new Date(2019,9,05,22,00,26),9.220000],
                              [new Date(2019,9,05,23,00,19),9.950000],
                              [new Date(2019,9,06,00,00,09),10.580000],
                              [new Date(2019,9,06,01,00,05),10.940000],
                              [new Date(2019,9,06,02,01,04),11.210000],
                              [new Date(2019,9,06,03,00,59),11.390000],
                              [new Date(2019,9,06,04,00,23),11.630000],
                              [new Date(2019,9,06,05,01,21),12.070000],
                              [new Date(2019,9,06,06,00,13),12.340000],
                              [new Date(2019,9,06,07,00,12),11.790000],
                              [new Date(2019,9,06,08,00,16),11.000000],
                              [new Date(2019,9,06,09,00,05),10.610000],
                              [new Date(2019,9,06,10,01,36),10.140000],
                              [new Date(2019,9,06,11,00,57),9.760000],
                              [new Date(2019,9,06,12,00,20),8.820000],
                              [new Date(2019,9,06,13,01,18),7.010000],
                              [new Date(2019,9,06,14,02,16),8.120000],
                              [new Date(2019,9,06,15,01,05),6.340000],
                              [new Date(2019,9,06,16,01,26),5.000000],
                              [new Date(2019,9,06,17,03,26),5.580000],
                              [new Date(2019,9,06,18,00,09),7.920000],
                              [new Date(2019,9,06,19,00,34),10.000000],
                              [new Date(2019,9,06,20,00,00),12.890000],
                              [new Date(2019,9,06,21,00,27),16.360001],
                              [new Date(2019,9,06,22,00,19),19.139999],
                              [new Date(2019,9,06,23,00,45),20.250000],
                              [new Date(2019,9,07,00,00,09),20.540001],
                              [new Date(2019,9,07,01,00,04),20.790001],
                              [new Date(2019,9,07,02,00,00),20.129999],
                              [new Date(2019,9,07,03,00,26),18.990000],
                              [new Date(2019,9,07,04,00,18),17.290001],
                              [new Date(2019,9,07,05,01,48),11.430000],
                              [new Date(2019,9,07,06,01,40),8.740000],
                              [new Date(2019,9,07,07,03,37),7.340000],
                              [new Date(2019,9,07,08,01,55),6.340000],
                              [new Date(2019,9,07,09,00,23),6.080000],
                              [new Date(2019,9,07,10,00,05),5.930000],
                              [new Date(2019,9,07,11,01,29),7.650000],
                              [new Date(2019,9,07,12,02,26),9.430000],
                              [new Date(2019,9,07,13,00,46),10.850000],
                              [new Date(2019,9,07,14,01,41),7.600000],
                              [new Date(2019,9,07,15,02,05),5.810000],
                              [new Date(2019,9,07,16,03,36),5.170000],
                              [new Date(2019,9,07,17,02,55),4.680000],
                              [new Date(2019,9,07,18,01,42),5.880000],
                              [new Date(2019,9,07,19,00,03),9.330000],
                              [new Date(2019,9,07,20,00,27),12.350000],
                              [new Date(2019,9,07,21,00,21),17.629999],
                              [new Date(2019,9,07,22,00,17),19.809999],
                              [new Date(2019,9,07,23,00,49),20.990000],
                              [new Date(2019,9,08,00,00,05),21.440001],
                              [new Date(2019,9,08,01,01,06),21.709999],
                              [new Date(2019,9,08,02,01,11),21.650000],
                              [new Date(2019,9,08,03,00,58),21.110001],
                              [new Date(2019,9,08,04,00,24),16.690001],
                              [new Date(2019,9,08,05,01,17),10.490000],
                              [new Date(2019,9,08,06,06,54),7.880000],
                              [new Date(2019,9,08,07,05,44),6.410000],
                              [new Date(2019,9,08,08,03,08),5.460000],
                              [new Date(2019,9,08,09,03,39),4.560000],
                              [new Date(2019,9,08,10,02,49),3.980000],
                              [new Date(2019,9,08,11,02,30),3.490000],
                              [new Date(2019,9,08,12,02,21),3.120000],
                              [new Date(2019,9,08,13,02,11),2.800000],
                              [new Date(2019,9,08,14,02,02),2.590000],
                              [new Date(2019,9,08,15,01,53),2.310000],
                              [new Date(2019,9,08,16,00,41),2.190000],
                              [new Date(2019,9,08,17,00,33),2.150000],
                              [new Date(2019,9,08,18,00,55),2.580000],
                              [new Date(2019,9,08,19,06,02),7.060000],
                              [new Date(2019,9,08,20,01,10),12.310000],
                              [new Date(2019,9,08,21,00,01),18.440001],
                              [new Date(2019,9,08,22,00,59),21.549999],
                              [new Date(2019,9,08,23,00,22),22.700001],
                              [new Date(2019,9,09,00,00,23),22.719999],
                              [new Date(2019,9,09,01,00,11),23.030001],
                              [new Date(2019,9,09,02,00,06),22.350000],
                              [new Date(2019,9,09,03,00,35),21.850000],
                              [new Date(2019,9,09,04,00,27),18.879999],
                              [new Date(2019,9,09,05,03,54),14.700000],
                              [new Date(2019,9,09,06,01,14),13.720000],
                              [new Date(2019,9,09,07,02,45),13.350000],
                              [new Date(2019,9,09,08,03,07),12.850000],
                              [new Date(2019,9,09,09,01,57),10.910000],
                              [new Date(2019,9,09,10,00,13),10.550000],
                              [new Date(2019,9,09,11,01,10),11.270000],
                              [new Date(2019,9,09,12,01,36),11.140000],
                              [new Date(2019,9,09,13,00,24),10.550000],
                              [new Date(2019,9,09,14,00,16),10.080000],
                              [new Date(2019,9,09,15,05,26),8.450000],
                              [new Date(2019,9,09,16,00,42),7.790000],
                              [new Date(2019,9,09,17,01,01),9.820000],
                              [new Date(2019,9,09,18,00,56),10.790000],
                              [new Date(2019,9,09,19,00,19),12.400000],
                              [new Date(2019,9,09,20,01,52),14.790000],
                              [new Date(2019,9,09,21,00,15),19.910000],
                              [new Date(2019,9,09,22,00,09),21.860001],
                              [new Date(2019,9,09,23,00,10),22.730000],
                              [new Date(2019,9,10,00,00,01),23.030001],
                              [new Date(2019,9,10,01,00,58),22.480000],
                              [new Date(2019,9,10,02,00,22),21.540001],
                              [new Date(2019,9,10,03,00,18),19.629999],
                              [new Date(2019,9,10,04,00,15),17.709999],
                              [new Date(2019,9,10,05,00,40),16.340000],
                              [new Date(2019,9,10,06,01,07),15.160000],
                              [new Date(2019,9,10,07,00,25),13.740000],
                              [new Date(2019,9,10,08,01,55),12.880000],
                              [new Date(2019,9,10,09,02,49),12.800000],
                              [new Date(2019,9,10,10,01,04),13.770000],
                              [new Date(2019,9,10,11,00,30),14.920000],
                              [new Date(2019,9,10,12,00,21),14.450000],
                              [new Date(2019,9,10,13,00,16),12.480000],
                              [new Date(2019,9,10,14,00,38),11.640000],
                              [new Date(2019,9,10,15,02,37),11.520000],
                              [new Date(2019,9,10,16,02,27),11.540000],
                              [new Date(2019,9,10,17,10,41),11.010000],
                              [new Date(2019,9,10,18,08,27),11.180000],
                              [new Date(2019,9,10,19,03,45),12.890000],
                              [new Date(2019,9,10,20,01,54),13.860000],
                              [new Date(2019,9,10,21,00,16),15.320000],
                              [new Date(2019,9,10,22,00,45),17.530001],
                              [new Date(2019,9,10,23,00,08),17.340000],
                              [new Date(2019,9,11,00,00,04),17.270000],
                              [new Date(2019,9,11,01,00,00),17.230000],
                              [new Date(2019,9,11,02,00,27),17.160000],
                              [new Date(2019,9,11,03,00,21),17.559999],
                              [new Date(2019,9,11,04,00,17),17.690001],
                              [new Date(2019,9,11,05,00,47),17.670000],
                              [new Date(2019,9,11,06,00,09),17.320000],
                              [new Date(2019,9,11,07,00,11),16.680000],
                              [new Date(2019,9,11,08,00,08),16.330000],
                              [new Date(2019,9,11,09,02,11),16.420000],
                              [new Date(2019,9,11,10,00,25),16.530001],
                              [new Date(2019,9,11,11,00,23),16.690001],
                              [new Date(2019,9,11,12,00,19),16.670000],
                              [new Date(2019,9,11,13,00,17),13.160000],
                              [new Date(2019,9,11,14,00,12),8.250000],
                              [new Date(2019,9,11,15,00,40),6.010000],
                              [new Date(2019,9,11,16,00,02),5.110000],
                              [new Date(2019,9,11,17,00,32),4.400000],
                              [new Date(2019,9,11,18,00,27),4.030000],
                              [new Date(2019,9,11,19,00,48),4.340000],
                              [new Date(2019,9,11,20,00,11),4.200000],
                              [new Date(2019,9,11,21,00,08),4.550000],
                              [new Date(2019,9,11,22,01,02),4.690000],
                              [new Date(2019,9,11,23,00,22),4.900000],
                              [new Date(2019,9,12,00,00,20),4.850000],
                              [new Date(2019,9,12,01,00,17),4.420000],
                              [new Date(2019,9,12,02,00,42),4.230000],
                              [new Date(2019,9,12,03,00,04),3.850000]
                              ]);
                              var rangeFilter = new google.visualization.ControlWrapper({
                            controlType: 'ChartRangeFilter',
                            containerId: 'range_filter_div',
                            options: {
                            filterColumnIndex: 0,
                            ui: {
                            chartOptions: {
                            height: 50,
                            width: 350,
                            chartArea: {
                            width: '75%'
                            }
                            },
                            minRangeSize: 864000, // 86400000ms = 1 day
                            snapToData: true
                            }
                            },
                            view: {
                            columns: [0, 1]
                            },
                            state: {
                            range: {
                            // set the starting range to January 2012
                            start: new Date(2019, 9, 1),
                            end: new Date(2019, 9, 10)
                            }
                            }
                            });


                              var chart = new google.visualization.ChartWrapper({
                                                                                chartType: 'LineChart',
                                                                                containerId: 'chart_div',
                                                                                options: {
                                                                                // width and chartArea.width should be the same for the filter and chart
                                                                                height: 300,
                                                                                width: 400,
                                                                                chartArea: {
                                                                                width: '75%'
                                                                                },legend: 'none',
                                                                                colors: ['#19acc6', '#19acc6'],
                                                                                width: 350,
                                                                                height: 500,
                                                                                options: {
                                                                                theme: 'maximized'
                                                                                },
                                                                                interpolateNulls: true,
                                                                                hAxis: {
                                                                                format: 'E, d-MMM'
                                                                                },
                                                                                vAxis: {
                                                                                format:'#°'
                                                                                },
                                                                                'backgroundColor': 'transparent',
                                                                                }
                                                                                });

                                                                                // Create the dashboard
                                                                                var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
                                                                                // bind the chart to the filter
                                                                                dash.bind([rangeFilter], [chart]);
                                                                                // draw the dashboard
                                                                                dash.draw(data);


            }
        </script>
    </head>
    <body>
        <div id="line_top_x"></div>
        <div id="dashboard">
            <div id="chart_div"></div>
            <div id="range_filter_div"></div>
        </div>
    </body>
</html>
...