html+F2生成折线图

最新推荐文章于 2021-06-20 20:58:10 发布

Upward Force

最新推荐文章于 2021-06-20 20:58:10 发布

阅读量1k

点赞数 1

分类专栏：图表 html F2 文章标签： html5 jsf2 canvas javascript 数据可视化

本文链接：https://blog.csdn.net/qq_43884155/article/details/107019485

版权

图表同时被 3 个专栏收录

8 篇文章 1 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

1、效果图
在这里插入图片描述
2、下载 f2.js，并放入自己的项目中

3、在页面中通过 script 标签引入 f2.js 脚本

<script src="./js/f2.js"></script>

4、在页面上创建一个具备宽高的 canvas 标签，并指定 id：

<canvas id="myChart" width="400" height="260"></canvas>

5、编写图表绘制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/f2.js"></script>
</head>

<body>
    <canvas id="myChart" width="400" height="260"></canvas>
    <script>
        // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
        const data = [{
            date: '2017-06-05',
            value: 116
        },
        {
            date: '2017-06-06',
            value: 129
        },
        {
            date: '2017-06-07',
            value: 135
        },
        {
            date: '2017-06-08',
            value: 86
        },
        {
            date: '2017-06-09',
            value: 73
        },
        {
            date: '2017-06-10',
            value: 85
        },
        {
            date: '2017-06-11',
            value: 73
        },
        {
            date: '2017-06-12',
            value: 68
        },
        {
            date: '2017-06-13',
            value: 92
        },
        {
            date: '2017-06-14',
            value: 130
        },
        {
            date: '2017-06-15',
            value: 245
        },
        {
            date: '2017-06-16',
            value: 139
        },
        {
            date: '2017-06-17',
            value: 115
        },
        {
            date: '2017-06-18',
            value: 111
        },
        {
            date: '2017-06-19',
            value: 309
        },
        {
            date: '2017-06-20',
            value: 206
        },
        {
            date: '2017-06-21',
            value: 137
        },
        {
            date: '2017-06-22',
            value: 128
        },
        {
            date: '2017-06-23',
            value: 85
        },
        {
            date: '2017-06-24',
            value: 94
        }];

        // Step 1: 创建 Chart 对象
        const chart = new F2.Chart({
            id: 'myChart',
            pixelRatio: window.devicePixelRatio, // 指定分辨率
        });

        // Step 2: 载入数据源
        chart.source(data, {
            value: {
                tickCount: 10,  // 坐标轴上刻度点的个数
                min: 50,    // 手动指定value字段最小值
                max: 350    // 手动指定value字段最大值
            },
            date: {
                type: 'timeCat',    // 指定date字段为时间类型
                range: [0, 0.8],    // 占x轴80%
                tickCount: 3   // 坐标轴上刻度点的个数
            }
        });

        // Step 3:使用图形语法进行图表的绘制
        // 注意：f2是移动端图表库，只有在移动端才能显示图例
        chart.tooltip({
            custom: true,   // 是否自定义 tooltip 提示框
            showXTip: true, // 是否展示 X 轴的辅助信息
            showYTip: true, // 是否展示 Y 轴的辅助信息
            snap: true, // 是否将辅助线准确定位至数据点
            crosshairsType: 'xy',   // 辅助线的种类
            crosshairsStyle: {  // 配置辅助线的样式
                lineDash: [2],  // 点线的密度
                stroke: 'rgba(255, 0, 0, 0.25)',
                lineWidth: 2
            }
        });

        // 坐标轴配置（此处是为date对应的坐标轴进行配置）
        chart.axis('date', {
            label: function label(text, index, total) {
                const textCfg = {
                    textAlign: 'center'
                };
                // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
                if (index === 0) {
                    textCfg.textAlign = 'left';
                } else if (index === total - 1) {
                    textCfg.textAlign = 'right';
                }
                textCfg.text = 'day: ' + text;  // textCfg.text 支持文本格式化处理
                return textCfg;
            }
        });
        // 点按照 x 轴连接成一条线，构成线图
        chart.line().position('date*value');

        // Step 4: 渲染图表
        chart.render();
    </script>
</body>

</html>

Upward Force

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html+F2生成折线图

1、效果图2、下载 f2.js，并放入自己的项目中3、在页面中通过 script 标签引入 f2.js 脚本<script src="./js/f2.js"></script>4、在页面上创建一个具备宽高的 canvas 标签，并指定 id：<canvas id="myChart" width="400" height="260"></canvas>5、编写图表绘制代码<!DOCTYPE html><html lang=
复制链接

扫一扫