scroll - JBLineChartView 可滚动

Question

我正在使用 JBLineChartView 绘制图表，但我得到了很多数据，当我在一个 View 中显示所有数据点时，它看起来非常拥挤。所以我很好奇是否可以激活/向图表添加滚动？

Answer 1

我提出了一个简单的解决方案。但是，如果您打算让此图表以与 JBChartViewDemo 相同的方式在触摸点显示工具提示，它将无法工作(我将在此处发布解决方法)

创建一个 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];
}

截图: