JBLineChartView可滚动

时间:2014-03-21 20:52:52

标签: scroll jbchartview

我正在使用JBLineChartView进行制图,但是我获得了大量数据,当我在一个视图中显示所有数据点时,它看起来非常紧张。所以我很好奇是否有可能激活/添加滚动到图表?

1 个答案:

答案 0 :(得分:1)

我来了一个简单的解决方案。但是,如果您打算让此图表在触摸点上显示与JBChartViewDemo相同的工具提示,则它将无效(我将在此处发布workarround)

创建一个UIScrollView,在其中添加您的JBLineChartView。

//You can call this method in -(void)viewDidLoad{}
-(void) initializeChart
{
       //UIScrollView (an IBOutlet called chartScrollView) with 5 Pages
        [JBLineChartView *balanceLineChartView = [[JBLineChartView alloc] initWithFrame:CGRectMake(0, 0,1400, 300)];

        //Setting up the UIScrollView contents frame size 
        self.chartScrollView.contentSize = balanceLineChartView.bounds.size;
        //Preventing vertical scrolling
        self.chartScrollView.contentInset = UIEdgeInsetsMake(-80,0,0,0);
        //UIScrollView frame
        self.chartScrollView.frame = CGRectMake(15, 235, 280, 300);
        //JBLineChartView setup
        self.balanceLineChartView.delegate = self;
        self.balanceLineChartView.dataSource = self;
        self.balanceLineChartView.headerPadding = kJBLineChartViewControllerChartHeaderPadding;
        self.balanceLineChartView.backgroundColor = kJBColorLineChartBackground;
        //Add your parameters, create header, footer, etc.
        //...
        //Then add your JBLineChartView to your UIScrollView
        [chartScrollView setClipsToBounds:YES];
        [chartScrollView addSubview:balanceLineChartView];

        //This is a custom view for Tooltip I've made with Interface Builder. For more info on that,
        //This link is about making custom UITableViewCell with Interface Builder, but you can build
        //other UIViews. http://www.appcoda.com/customize-table-view-cells-for-uitableview/
        //It has two UIlabels, and called "chartTooltipView". It is a property 
        //of myUIViewController.     
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"UIMyCustomViewWithTwoLabels" owner:
    self   options:nil];
        chartTooltipView = [nib objectAtIndex:0];
        [self.view addSubview: chartTooltipView];
}

要在点击点数时显示工具提示,我必须执行以下操作:

//Define JBLineChartViewDelegate method
- (void)lineChartView:(JBLineChartView *)lineChartView didSelectLineAtIndex:
        (NSUInteger)lineIndex horizontalIndex:(NSUInteger)horizontalIndex touchPoint:
        (CGPoint)touchPoint
{
    //Tooltip settings

    float tooltipOriginX =0;
    float tooltipOriginY = 0;

        //Calculate tooltip position inside UIScrollView frame area (inside it's frame)
        //kMaxChartPointX is a float constant I defined based on the UIScrollView frame 
        //(to prevent the tooltip from appearing outside the chart visible area. I've used 
        //218.0f in this case.) 
        CGPoint contentOffset = [chartScrollView contentOffset];
        tooltipOriginX = ((touchPoint.x - contentOffset.x)>=
                     kMaxChartPointX)? kMaxChartPointX: (touchPoint.x -contentOffset.x);

        chartTooltipView.frame =
        CGRectMake(tooltipOriginX, tooltipOriginY, kUITicketChartTooltipViewWidth, 
                                                                    kUITicketChartTooltipViewHeight);
        //Show tooltip
        [chartTooltipView setHidden: NO];
        [self.view bringSubviewToFront:chartTooltipView];
        //Add the points data to the tooltip view from your datasource. 
        chartTooltipView.label1.text = @"MyDataText1";
        chartTooltipView.label2.text = @"MyDataText2";
}


//Hide the tooltip view
- (void)didUnselectLineInLineChartView:(JBLineChartView *)lineChartView
{
    [chartTooltipView setHidden: YES];
}

截图: Point inside the first UIScrollView frame (first page)

Still inside the UIScrollView (first page), it would be displayed outside UIScrollview.frame if the x coordinate from touchPoint wasn't corrected

Tooltip won't be displayed outside UIScrollView.frame(from the left)

Another point