Chartist.js饼图

时间：2024-04-26 14:55:29浏览次数：16

标签：function Chartist value js series var data

基础

代码如下

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./chartist.min.css">
    <script src="./chartist.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  </head>
  <body>
    <div class="ct-chart ct-perfect-fourth" style="width: 500px;height: 350px;"></div>
    <script>
        var data = {
        series: [5, 3, 4]
        };

        var sum = function(a, b) { return a + b };

        new Chartist.Pie('.ct-chart', data, {
        labelInterpolationFnc: function(value) {
            return Math.round(value / data.series.reduce(sum) * 100) + '%';
        }
        });
    </script>
  </body>
</html>

效果图

点击查看详情

自定义标签

代码如下

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./chartist.min.css">
    <script src="./chartist.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  </head>
  <body>
    <div class="ct-chart ct-perfect-fourth" style="width: 500px;height: 350px;"></div>
    <script>
        var data = {
        labels: ['Bananas', 'Apples', 'Grapes'],
        series: [20, 15, 40]
        };

        var options = {
        labelInterpolationFnc: function(value) {
            return value[0]
        }
        };

        var responsiveOptions = [
        ['screen and (min-width: 640px)', {
            chartPadding: 30,
            labelOffset: 100,
            labelDirection: 'explode',
            labelInterpolationFnc: function(value) {
            return value;
            }
        }],
        ['screen and (min-width: 1024px)', {
            labelOffset: 80,
            chartPadding: 20
        }]
        ];

        new Chartist.Pie('.ct-chart', data, options, responsiveOptions);
    </script>
  </body>
</html>

效果图

点击查看详情

仪表图

代码如下

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./chartist.min.css">
    <script src="./chartist.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  </head>
  <body>
    <div class="ct-chart ct-perfect-fourth" style="width: 500px;height: 350px;"></div>
    <script>
        new Chartist.Pie('.ct-chart', {
        series: [20, 10, 30, 40]
        }, {
        donut: true,
        donutWidth: 60,
        startAngle: 270,
        total: 200,
        showLabel: false
        });
    </script>
  </body>
</html>

效果图

点击查看详情

标签：function,Chartist,value,js,series,var,data
From： https://www.cnblogs.com/dogleftover/p/18160070

Chartist.js条形图
双极条形图代码案例<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="./chartist.min.css"><scriptsrc="./chartist.min.js"></script><scriptsrc="https://cdnjs.cloud......
Chartist.js条形图(二)
多行标签代码如下<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="./chartist.min.css"><scriptsrc="./chartist.min.js"></script><scriptsrc="https://cdnjs.cloudf......
JSON基本使用 - 副本
1.JSON是什么？JSON，全称是JavaScriptObjectNotation，即JavaScript对象标记法。JSON是一种轻量级（Light-Meight)、基于文本的(Text-Based)、可读的(Human-Readable)格式。JSON的名称中虽然带有JavaScript，但这是指其语法规则是参考JavaScript对象的，而不是指只能用于JavaSc......
Chartist.js折线图(四)
线插值/平滑代码如下<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="./chartist.min.css"><scriptsrc="./chartist.min.js"></script></head><body><div......
js使用xlsx读取excel文件
官方案例：https://oss.sheetjs.com/sheetjs/参考：https://www.jb51.net/javascript/293098ilx.htm大致的代码如下，如果要实际使用还得修改修改完善完善。<inputtype="file"id="uploadExcel"multiple onChange=’onImportExcel'/>onImportExcel=file=>{//......
《Vue.js设计与实现》第八章挂载与更新
8.1挂载子节点和元素的属性8.2HTMLAttributes与DOMProperties8.3正确地设置元素属性8.4class的处理8.5卸载操作8.6区分vnode的类型8.7事件的处理8.8事件冒泡与更新时机问题8.9更新子节点8.10文本节点和注释节点8.11Fragment......
js的函数及无参与有参构造函数
1.函数定义fuctionfn(str){//1.定义函数alert(str);}fn("测试方法");varfn1=function(str){//2.定义函数alert(str);}varfn2=fuction(f,str){f(str);}fn2(fn1,"方法作为参数");//函数可以作为方法传递参数2.无参构造：varperson=function(){alert("......
golang之json.RawMessage
RawMessage具体来讲是json库中定义的一个类型。它实现了Marshaler接口以及Unmarshaler接口，以此来支持序列化的能力。注意上面我们引用官方doc 的说明。使用场景设想一下，我们给某种业务场景定义了一个通用的model，其中部分数据需要在不同场景下对应不同的结构体......
js 闭包的概念及应用场景
1.概念是内部函数可以访问外部函数作用域中的变量。2.来由由于JavaScript中的函数作用域规则和函数可以作为值传递的特性产生的3.优点封装性（可以将变量和函数封装起来，防止外部访问和修改，提高了代码的可维护性和可重用性）保存状态（即使函数已经执行完毕，状态仍然保存，在事件处理......
Chartist.js折线图(三)
事件替换图形代码如下<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="./chartist.min.css"><scriptsrc="./chartist.min.js"></script></head><body><div......

Chartist.js饼图

基础

自定义标签

仪表图

相关文章

赞助商

阅读排行