将Y轴粘贴在谷歌实时图形上的一个位置



我的iOS/Objective c代码在webview中使用谷歌图表/图形。但是我的数据太长了,所以它正在滚动,就像所有值一样。但是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>

我不知怎么找到了一个解决方案,事实上,你不能在谷歌图形中做任何事情来粘贴y轴和范围过滤器在移动视图中也不工作,所以它在这里也不工作。

所以我所做的是添加了另一个具有相同值的网络视图&用户交互启用了NO,当第一个将滚动25个像素时,我更改了它的框架,并将第二个网络视图属性设置为NO,因此y轴将始终存在,但它将是具有相同值的另一个网络视图。

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, 100, 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, 100, self.view.frame.size.width-30, self.view.frame.size.height-100);
}
else
{
[webV2 setHidden:YES];
webV.frame=CGRectMake(0, 100, self.view.frame.size.width-30, 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, 100, self.view.frame.size.width-30, self.view.frame.size.height-100);
}
else
{
[webV2 setHidden:YES];
webV.frame=CGRectMake(0, 100, self.view.frame.size.width-30, self.view.frame.size.height-100);
}
//    if (scrollView.contentOffset.y > 0)
//    scrollView.contentOffset = CGPointMake(scrollView.contentOffset.x, 0);
}

相关内容