前端之家

  1. 首页
  2. 问答

将Y轴仅停留在Google实时图形上的一个位置

• 问答

我正在将webview的Google Chart / graph用于iOS / Objective C代码。但是我拥有的数据太长了，因此就所有值而言它都在滚动。但是Y轴也会随着数据滚动，因此后面的值很难识别。有什么办法可以使Y轴成为静态的，而无论x轴上的值有多长，它都不会滚动。 在这里提出一个建议之后，我尝试使用范围过滤器，但是该html在Web浏览器上可以运行，但是我无法在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,02),31.620001],[new Date(2019,28),31.520000],02,22),30.320000],03,18),31.200001],04,29.500000],05,14),27.500000],06,40),27.059999],07,05),26.750000],08,26.070000],09,24),25.750000],10,49),25.299999],11,24.129999],12,15),22.379999],13,29),21.980000],14,21.820000],15,52),21.250000],16,08),19.450001],17,06),18.879999],18,30),18.660000],19,23),17.910000],20,51),17.040001],21,16.430000],22,16.730000],23,16.450001],16.400000],16.080000],41),15.300000],36),14.540000],00),13.970000],13.650000],20),13.160000],09),12.710000],12.650000],12.660000],12.420000],12.470000],39),12.350000],31),12.180000],25),11.880000],11.680000],21),11.430000],10.770000],38),10.200000],01),10.820000],11.490000],12.670000],12.870000],11),37),11.730000],27),11.310000],11.010000],10),10.550000],04),9.910000],9.690000],9.540000],9.330000],9.210000],9.230000],45),9.340000],9.390000],35),9.530000],55),9.490000],9.620000],03),9.780000],9.630000],58),9.810000],47),10.910000],12),11.890000],12.260000],12.920000],14.690000],12.840000],12.830000],19),10.750000],46),9.050000],8.870000],8.650000],8.480000],8.090000],7.930000],7.790000],17),7.630000],7.540000],7.470000],7.480000],32),6.420000],8.860000],9.980000],10.190000],57),10.430000],11.670000],11.540000],42),11.130000],10.350000],9.460000],9.110000],8.770000],7.920000],6.630000],7.200000],44),8.100000],8.640000],59),8.710000],8.900000],8.760000],8.420000],8.320000],8.510000],8.910000],9.190000],9.150000],26),9.220000],9.950000],10.580000],10.940000],11.210000],11.390000],11.630000],12.070000],13),12.340000],11.790000],16),11.000000],10.610000],10.140000],9.760000],8.820000],7.010000],8.120000],6.340000],5.000000],5.580000],34),10.000000],12.890000],16.360001],19.139999],20.250000],20.540001],20.790001],20.129999],18.990000],17.290001],48),8.740000],7.340000],6.080000],5.930000],7.650000],9.430000],10.850000],7.600000],5.810000],5.170000],4.680000],5.880000],17.629999],19.809999],20.990000],21.440001],21.709999],21.650000],21.110001],16.690001],10.490000],54),7.880000],6.410000],5.460000],4.560000],3.980000],3.490000],3.120000],2.800000],2.590000],53),2.310000],2.190000],33),2.150000],2.580000],7.060000],12.310000],18.440001],21.549999],22.700001],22.719999],23.030001],22.350000],21.850000],14.700000],13.720000],13.350000],07),12.850000],11.270000],11.140000],10.080000],8.450000],9.820000],56),10.790000],12.400000],14.790000],19.910000],21.860001],22.730000],22.480000],21.540001],19.629999],17.709999],16.340000],15.160000],13.740000],12.880000],12.800000],13.770000],14.920000],14.450000],12.480000],11.640000],11.520000],11.180000],13.860000],15.320000],17.530001],17.340000],17.270000],17.230000],17.160000],17.559999],17.690001],17.670000],17.320000],16.680000],16.330000],16.420000],16.530001],16.670000],8.250000],6.010000],5.110000],4.400000],4.030000],4.340000],4.200000],4.550000],4.690000],4.900000],4.850000],4.420000],4.230000],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,1),end: new Date(2019,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'],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>
aaa925168 回答：将Y轴仅停留在Google实时图形上的一个位置

我以某种方式找到了解决方案， 事实是您无法在Google图形中做任何事情来粘住y轴，并且范围过滤器在移动视图中也不起作用，因此在这里也将不起作用。

所以我所做的就是添加了另一个具有相同值的webview，并且启用了用户交互功能，当第一个webview滚动25个像素时，我将其更改为帧并将第二个webview属性设置为“否”，因此y轴将始终存在，但是它将是另一个具有相同值的webview。

 NSString *htmlFile = [[NSBundle mainBundle] pathForResource:@"graph1" ofType:@"html"];
        NSString* htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil];
        webV=[[UIWebView alloc]initWithFrame:CGRectMake(0,100,self.view.frame.size.width-100,self.view.frame.size.height-40)];
        webV.delegate=self;
        webV.scrollView.delegate=self;
        [webV loadHTMLString:htmlString baseURL:[[NSBundle mainBundle] bundleURL]];

        NSString *htmlFile2 = [[NSBundle mainBundle] pathForResource:@"graph1" ofType:@"html"];
        NSString* htmlString2 = [NSString stringWithContentsOfFile:htmlFile2 encoding:NSUTF8StringEncoding error:nil];
       webV2=[[UIWebView alloc]initWithFrame:CGRectMake(0,self.view.frame.size.width,self.view.frame.size.height-100)];
        webV2.delegate=self;
        [webV2 loadHTMLString:htmlString2 baseURL:[[NSBundle mainBundle] bundleURL]];
        [self.view addSubview:webV2];
        [self.view addSubview:webV];
        [webV2 setHidden:YES];
        [webV2 setUserInteractionEnabled:YES];
        [webV setUserInteractionEnabled:YES];
        [webV2 setUserInteractionEnabled:NO];
        [self.view setBackgroundColor:[UIColor whiteColor]];
        [webV2 setBackgroundColor:[UIColor whiteColor]];
        [webV setBackgroundColor:[UIColor whiteColor]];
        webV2.scrollView.alwaysBounceVertical=NO;




-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    if (scrollView.contentOffset.x>30) {
        [webV2 setHidden:NO];
        webV.frame=CGRectMake(30,self.view.frame.size.width-30,self.view.frame.size.height-100);
    }
    else
    {
        [webV2 setHidden:YES];
        webV.frame=CGRectMake(0,self.view.frame.size.height-100);
    }
    webV2.userInteractionEnabled=YES;
    webV.userInteractionEnabled=YES;

    NSLog(@"%@",NSStringFromCGPoint(scrollView.contentOffset));

}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (scrollView.contentOffset.x>30) {
        [webV2 setHidden:NO];
        webV.frame=CGRectMake(30,self.view.frame.size.height-100);
    }
//    if (scrollView.contentOffset.y > 0)
//    scrollView.contentOffset = CGPointMake(scrollView.contentOffset.x,0);

}
google-chartwrappergoogle-visualizationgraphiosobjective-c
本文链接：https://www.f2er.com/3166546.html

大家都在问