美文网首页iOS开发中的神兵利器
3.6 创建一个包含三条折线的线性图表 [iOS开发中的神兵利器

3.6 创建一个包含三条折线的线性图表 [iOS开发中的神兵利器

作者: 互动教程网 | 来源:发表于2018-04-12 20:39 被阅读12次

    1. 本节课将为您演示,如何创建一个包含三条折线的线性图表。首先在左侧的项目导航区,打开视图控制器的代码文件。

    image

    2. 现在开始编写代码,创建一个折线图表。

    image

    3. 在当前的类文件中,引入已经安装的第三方类库。

    image

    4. 接着创建一个包含6个数字的数组,作为第一组折线的数据。

    image

    5. 创建第二个数组,作为另一组折线的数据。

    image

    6. 创建第三个数组,作为第三组折线的数据, 我们的折线图表中,将用来展示三组数据的趋势。

    image

    7. 依次创建三个图表数据记录。

    image

    8. 接着通过一个循环,将第一个数组中的数字,添加到图表数据记录中。

    image

    9. 使用相同的方式,将第二个数组中的数字,添加到图表数据记录中。

    image

    10. 最后将第三个数组中的数字,添加到图表数据记录中。

    image

    11. 创建一个数据集,并设置数据集的值域和标签文字。

    image

    12. 同时设置该数据集对应折线的填充颜色。

    image

    13. 接着设置不在折线的端点绘制圆圈。

    image

    14. 设置折线的宽度为3。

    image

    15. 然后创建第二个数据集,并设置数据集的值域和标签文字。

    image

    16. 设置第二条折线,端点位置上的圆圈的半径为4。

    image

    17. 接着设置圆圈的填充颜色。

    image

    18. 设置第二条折线的填充颜色。

    image

    19. 使用相同的方式,创建第三个数据集,并设置数据集的值域和标签文字。

    image

    20. 设置第三条折线的宽度为3。

    image

    21. 设置第三条折线的填充颜色。

    image

    22. 创建一个指定显示区域的折线图表视图。

    image

    23. 设置图表视图的背景颜色为无色。

    image

    24. 设置左侧的坐标轴的最小值为0。

    image

    25. 同样设置右侧的坐标轴的最小值为0。

    image

    26. 设置折线图表所显示的数据内容。

    image

    27. 将配置好的图表,添加到根视图中,然后点击左上角的[编译并运行]按钮,启动模拟器预览项目。

    image

    28. 在弹出的模拟器中,显示了一张具有不同颜色的三条折线的图表,并且在它们的端点,各有不同样式的圆圈标记。最后关闭模拟器,并结束本节课程。

    image

    本文整理自:《app开发中的神兵利器》,真正的[手把手]教学模式,用最快的速度上手iOS开发,苹果商店App Store免费下载:https://itunes.apple.com/cn/app/id1209739676,或扫描本页底部的二维码。课程配套素材下载地址:资料下载

    apps8 2.png

    相关文章

      网友评论

        本文标题:3.6 创建一个包含三条折线的线性图表 [iOS开发中的神兵利器

        本文链接:https://www.haomeiwen.com/subject/rbwfkftx.html