首页 > 其他分享 >Chartist.js折线图(二)

Chartist.js折线图(二)

时间:2024-04-26 11:14:15浏览次数:25  
标签:function index return data js var series 折线图 Chartist

折线散点图

  • 代码如下
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./chartist.min.css">
    <script src="./chartist.min.js"></script>
  </head>
  <body>
    <div class="ct-chart ct-perfect-fourth" style="width: 500px;height: 350px;"></div>
    <script>
        var times = function(n) {
        return Array.apply(null, new Array(n));
        };

        var data = times(52).map(Math.random).reduce(function(data, rnd, index) {
        data.labels.push(index + 1);
        data.series.forEach(function(series) {
            series.push(Math.random() * 100)
        });

        return data;
        }, {
        labels: [],
        series: times(4).map(function() { return new Array() })
        });

        var options = {
        showLine: false,
        axisX: {
            labelInterpolationFnc: function(value, index) {
            return index % 13 === 0 ? 'W' + value : null;
            }
        }
        };

        var responsiveOptions = [
        ['screen and (min-width: 640px)', {
            axisX: {
            labelInterpolationFnc: function(value, index) {
                return index % 4 === 0 ? 'W' + value : null;
            }
            }
        }]
        ];

        new Chartist.Line('.ct-chart', data, options, responsiveOptions);
    </script>
  </body>
</html>
  • 效果图
点击查看详情

标签:function,index,return,data,js,var,series,折线图,Chartist
From: https://www.cnblogs.com/dogleftover/p/18159563

相关文章

  • Chartist.js折线图
    数据漏洞代码案例<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="./chartist.min.css"><scriptsrc="./chartist.min.js"></script></head><body><divcl......
  • Js链式调用面试题
    Js链式调用需求:要求可以链式调用对象的方法,该对象有四个方法,加减乘除,一个get结果方法eg:counter.add(3).sub(1).get()//2方法一通过Es6实现classCounter{privateresult=0;add(val:number){this.result+=val;returnthis;}sub(val:nu......
  • vue3+vite+js 引用public文件夹中js文件
    vue的public的资源在打包时不会被编译,只会copy所以在在src路径下引入public文件夹下的图片、视频、音频,编译不会改变其路径,但是在src下引入public文件夹下的js、json,在打包时都会被编译,所以直接引入会丢失路径(因为打包时,当前页面引入的路径被hash打包,而public文件夹下只是被cop......
  • js逆向实战之喜马拉雅Xm-Sign参数解密
    url:https://www.ximalaya.com/channel/11/分析过程抓包,关注有页面数据回显的数据包。该url的请求头中有个加密的参数,找到该参数的加密过程。由于该参数名比较不常见,可以直接全局搜索这个参数名。只有一处,打断点。切换页码,触发断点。非常直接,xm-sign是由d.getS......
  • 2024年vue 开发环境 Node.js于win10环境下的安装
    2024年vue开发环境Node.js于win10环境下的安装导航2024年vue开发环境Node.js于win10环境下的安装导航一、下载node.js二、安装node.js三、测试(一)四、环境配置五、测试(二)六、安装淘宝镜像七、安装vue脚手架一、下载node.jsNode.js官方网站下载:https://nodejs.org/en......
  • threejs 父元素 相对位置 position 网格对象
    设置position都是相对于父元素的位置设置的//导入threejsimport*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";//创建场景sceneconstscene=newTHREE.Scene();//console.log(scene,'scene'......
  • vite打包,pdfjs-dist 报错import引入pdfjs-dist报错Top-level await is not available
    Top-levelawaitisnotavailableintheconfiguredtargetenvironment("chrome87","edge88","es2020","firefox78","safari14"+2overrides)node_modules/pdfjs-dist/build/pdf.mjs:17349:53:17349│/****......
  • Javascript的数据类型和json数组
    4个数据类型:NumberStringBooleanUndefinedalert(parseInt(k));//如果不是数字会输出NaN,从第一个字符开始输出数字,直到不是数字后返回值。json数组://js中k、v型数据,使用jsonvarperson={name:"张三",//注意里面的元素用,分割。定义的是key是name的value值为张三age......
  • JSON 序列化 属性名 大写变成小写 保持不变 newsoft.json system.text.json
    JSON序列化属性名由大写变成小写的问题在ASP.NET中,默认情况下,JSON序列化会将属性名转换为小写(camelcase)以匹配JSON的约定。如果您希望保留C#的命名约定(即属性名的大小写不变),您需要更改默认的JSON序列化器。System.Text.Json使用System.Text.Json(推荐):在Startup.c......
  • three.js实现相机碰撞,相机不穿墙壁、物体
    大家好,本文实现了相机碰撞检测,使相机不穿墙壁、物体,并给出了思路和代码,感谢大家~关键词:数字孪生、three.js、Web3D、WebGL、相机碰撞、游戏相机我正在承接Web3D数字孪生项目,具体介绍可看承接各种Web3D业务目录实现原理参考资料实现前:移动第三人称相机时,相机可能会穿入到物体......