最近学了heighchart和chart画图，学习知识记录一下

最新推荐文章于 2021-09-15 17:59:34 发布

夜半207

最新推荐文章于 2021-09-15 17:59:34 发布

阅读量469

点赞数

分类专栏：前端学习 php 文章标签： html js 画图 chart heighchart

本文链接：https://blog.csdn.net/qq_31893087/article/details/80411267

版权

前端学习同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

php

1 篇文章 0 订阅

订阅专栏

heighchart动态设置图像，使得x轴为自己想要的时间间隔，每个一秒，增加一个数据

下面是实例中的代码，使用的是heighchar.js，这个x的时间需要格式化来定义：

1、利用的div容器，可以随意改变其大小

2、数据点可以显示

3、当添加的数据多时，x轴自动缩小了，标识也变了

下图为heighchart显示数据图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="container" style="width: 800px;height:600px;"></div>
</body>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script>
    // 图表配置
    var options = {
        chart: {
            type: 'spline'                          //指定图表的类型，默认是折线图（line）spline是光滑的曲线
        },
        title: {
            text: '病人心率变化曲线'                 // 标题
        },
        // subtitle: {//副标题
        //     text: '数据来源: WorldClimate.com'
        // },
        credits: {//右下角的文本
            enabled: true,
            position: {//位置设置
                align: 'right',
                x: -10,
                y: -10
            },
            href: "http://www.highcharts.com",//点击文本时的链接
            style: {
                color: '#000'
            },
            text: "Highcharts Demo"//显示的内容
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                //millisecond: '%H:%M:%S.%L',
                //second: '%H:%M:%S',
                minute: '%H:%M',
                // hour: '%H:%M',
                // day: '%e. %b',
                // week: '%e. %b',
                // month: '%b \'%y',
                // year: '%Y'
            }
        },
        yAxis: {
            title: {
                text: '跳动次数/n'                // y 轴标题
            }
        },
        plotOptions: {//开启图上的数据显示
            spline: {
                dataLabels: {
                    // 开启数据标签
                    enabled: true
                },
                // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                enableMouseTracking: false
            },
            series: {
                marker: {
                    radius: 5,  //曲线点半径，默认是4
                    symbol: 'triangle', //曲线点类型："circle", "square", "diamond", "triangle","triangle-down"，默认是"circle"
                    //fillColor: 'red'//可以设置
                }
            }
        },
        series: [{                              // 数据列
            name: '小明',                        // 数据列名
            // data:[60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],//一开始要展示多少个数据
            pointStart: Date.UTC(2018, 5, 1, 8, 0, 0),
            pointInterval: 60 * 1000,//这个设置的时间要和dateTimeLabelFormats下的时间最小一致
            color: 'blue',//折线的颜色
            marker:{fillColor: 'red'}//也可以设置呢
        }]
    };
    // 图表初始化函数
    var chart = Highcharts.chart('container', options);

    function updata() {
        var rom = Math.round(Math.random() * (130 - 40 + 1) + 40);//Math.random()(a-b+1)+b 产生[a,b]区间的数
        chart.series[0].addPoint(rom);
    }

    setInterval(updata, 1000);
</script>
</html>

chart显示数据

1、chart.js显示折线图，使用的canvas，这时，它的大小真的不会弄了。发现放到div中可以设置大小了

2、可以很清晰的自定义x轴，时间轴自动旋转了，但是太多了，不会比例缩小展示，如heighchart

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script src="js/Chart.min.js"></script>
<script>
    var ctx = document.getElementById("canvas").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'line', // line 表示是 曲线图，当然也可以设置其他的图表类型 如柱形图 : bar  或者其他
        data: {
            //labels : ["January","February","March","April","May","June","July"], //按时间段 可以按星期，按月，按年
            datasets : [
                {
                    label: "病人心率图",  //当前数据的说明
                    fill: false,  //是否要显示数据部分阴影面积块  false:不显示
                    borderColor: "rgba(255,0,0,1)",//数据曲线颜色
                    pointBackgroundColor: "#fff", //数据点的颜色
                    pointSize: "50px",
                    //data: [80, 90, 100, 30, 67, 59, 88],  //填充的数据
                }
            ]
        }
    });
    setInterval(updata, 1000);
    function updata() {
        var date = new Date();
        var time = date.getHours() + ":" + date.getMinutes() +":" + date.getSeconds();
        //myChart.data.labels.shift();//去掉数组中的数 图像动起来了
        myChart.data.labels.push(time);
       // myChart.data.datasets[0].data.shift();
        var n = Math.random() * (130 - 40 + 1) + 40;//产生40-130数据
        myChart.data.datasets[0].data.push(n);
        myChart.update();
    }
</script>
</html>

如下图chart.js 画出来的图

夜半207

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
最近学了heighchart和chart画图，学习知识记录一下

heighchart动态设置图像，使得x轴为自己想要的时间间隔，每个一秒，增加一个数据下面是实例中的代码，使用的是heighchar.js，这个x的时间需要格式化来定义：1、利用的div容器，可以随意改变其大小2、数据点可以显示3、当添加的数据多时，x轴自动缩小了，标识也变了&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; ...
复制链接

扫一扫