基于 HTML5 的 JavaScript 图表库——chart.js

最新推荐文章于 2024-07-12 10:59:50 发布
最新推荐文章于 2024-07-12 10:59:50 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： HTML4/HTML5 JavaScript 文章标签： chart.js

Chart.js是一个HTML5图表库，使用canvas元素来展示各式各样的客户端图表，支持折线图、柱形图、雷达图、饼图、环形图等。在每种图表中，还包含了大量的自定义选项，包括动画展示形式。 Chart.js比较轻量（gzip版本仅4.5k），且不依赖其他库。

项目官网：http://www.chartjs.org/

案例下载:http://git.oschina.net/sensus/chart.jsAnLi/tree/master

曲线图（Line chart）

复制代码
复制代码 
<!doctype html>
<html>
    <head>
        <title>Line Chart</title>
        <script src="../Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
            canvas{
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" height="450" width="600"></canvas>


    <script>

        var lineChartData = {
　　　　　　　// x轴的标示
            labels : ["January","February","March","April","May","June","July"],
　　　　　　　// 数据，数组中的每一个object代表一条线
            datasets : [
                {
　　　　　　　　　　　　// 颜色的使用类似于CSS，你也可以使用RGB、HEX或者HSL
　　　　　　　　　　　　// rgba颜色中最后一个值代表透明度
　　　　　　　　　　　　// 填充颜色
                    fillColor : "rgba(220,220,220,0.5)",
　　　　　　　　　　　　// 线的颜色
                    strokeColor : "rgba(220,220,220,1)",
　　　　　　　　　　　　// 点的填充颜色
                    pointColor : "rgba(220,220,220,1)",
　　　　　　　　　　　　// 点的边线颜色
                    pointStrokeColor : "#fff",
　　　　　　　　　　　　// 与x轴标示对应的数据
                    data : [65,59,90,81,56,55,40]
                },
                {
                    fillColor : "rgba(151,187,205,0)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    data : [28,48,40,19,96,27,100]
                }
            ]
            
        }

    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
    
    </script>
    </body>
</html>
复制代码
复制代码

效果如下

图表选项

复制代码
复制代码 
    var options = {
        //Boolean - If we show the scale above the chart data    
        // 网格线是否在数据线的上面        
        scaleOverlay : false,
        
        //Boolean - If we want to override with a hard coded scale
        // 是否用硬编码重写y轴网格线
        scaleOverride : false,
        
        //** Required if scaleOverride is true **
        //Number - The number of steps in a hard coded scale
        // y轴刻度的个数
        scaleSteps : null,
        //Number - The value jump in the hard coded scale
        // y轴每个刻度的宽度
        scaleStepWidth : null,
        //Number - The scale starting value
        // y轴的起始值
        scaleStartValue : null,

        //String - Colour of the scale line    
        // x轴y轴的颜色
        scaleLineColor : "rgba(0,0,0,1)",
        
        //Number - Pixel width of the scale line
        // x轴y轴的线宽    
        scaleLineWidth : 1,

        //Boolean - Whether to show labels on the scale    
        // 是否显示y轴的标签
        scaleShowLabels : true,
        
        //Interpolated JS string - can access value
        // 标签显示值
        scaleLabel : "<%=value%>",
        
        //String - Scale label font declaration for the scale label
        // 标签的字体
        scaleFontFamily : "'Arial'",
        
        //Number - Scale label font size in pixels    
        // 标签字体的大小
        scaleFontSize : 12,
        
        //String - Scale label font weight style
        // 标签字体的样式
        scaleFontStyle : "normal",
        
        //String - Scale label font colour    
        // 标签字体的颜色
        scaleFontColor : "#666",    
        
        ///Boolean - Whether grid lines are shown across the chart
        // 是否显示网格线
        scaleShowGridLines : true,
        
        //String - Colour of the grid lines
        // 网格线的颜色
        scaleGridLineColor : "rgba(0,0,0,.1)",
        
        //Number - Width of the grid lines
        // 网格线的线宽
        scaleGridLineWidth : 1,    
        
        //Boolean - Whether the line is curved between points
        // 是否是曲线
        bezierCurve : true,
        
        //Boolean - Whether to show a dot for each point
        // 是否显示点
        pointDot : true,
        
        //Number - Radius of each point dot in pixels
        // 点的半径
        pointDotRadius : 3,
        
        //Number - Pixel width of point dot stroke
        // 点的线宽
        pointDotStrokeWidth : 1,
        
        //Boolean - Whether to show a stroke for datasets
        datasetStroke : true,
        
        //Number - Pixel width of dataset stroke
        // 数据线的线宽
        datasetStrokeWidth : 3,
        
        //Boolean - Whether to fill the dataset with a colour
        // 数据线是否填充颜色
        datasetFill : true,
        
        //Boolean - Whether to animate the chart
        // 是否有动画效果
        animation : true,

        //Number - Number of animation steps
        // 动画的步数
        animationSteps : 60,
        
        //String - Animation easing effect
        // 动画的效果
        animationEasing : "easeOutQuart",

        //Function - Fires when the animation is complete
        // 动画完成后调用
        onAnimationComplete : null
    }
复制代码
复制代码

添加选项后，调用如下

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData, options);

柱状图（Bar chart）

复制代码
复制代码 
<!doctype html>
<html>
    <head>
        <title>Bar Chart</title>
        <script src="../Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
            canvas{
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" height="450" width="600"></canvas>


    <script>

        var barChartData = {
            labels : ["January","February","March","April","May","June","July"],
            datasets : [
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    data : [65,59,90,81,56,55,40]
                },
                {
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,1)",
                    data : [28,48,40,19,96,27,100]
                }
            ]
            
        }

    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
    
    </script>
    </body>
</html>
复制代码
复制代码

效果如下

图表选项，内容基本如上，不一一注释

复制代码
复制代码 
Bar.defaults = {
                
    //Boolean - If we show the scale above the chart data            
    scaleOverlay : false,
    
    //Boolean - If we want to override with a hard coded scale
    scaleOverride : false,
    
    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : null,
    //Number - The value jump in the hard coded scale
    scaleStepWidth : null,
    //Number - The scale starting value
    scaleStartValue : null,

    //String - Colour of the scale line    
    scaleLineColor : "rgba(0,0,0,.1)",
    
    //Number - Pixel width of the scale line    
    scaleLineWidth : 1,

    //Boolean - Whether to show labels on the scale    
    scaleShowLabels : false,
    
    //Interpolated JS string - can access value
    scaleLabel : "<%=value%>",
    
    //String - Scale label font declaration for the scale label
    scaleFontFamily : "'Arial'",
    
    //Number - Scale label font size in pixels    
    scaleFontSize : 12,
    
    //String - Scale label font weight style    
    scaleFontStyle : "normal",
    
    //String - Scale label font colour    
    scaleFontColor : "#666",    
    
    ///Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines : true,
    
    //String - Colour of the grid lines
    scaleGridLineColor : "rgba(0,0,0,.05)",
    
    //Number - Width of the grid lines
    scaleGridLineWidth : 1,    

    //Boolean - If there is a stroke on each bar    
    barShowStroke : true,
    
    //Number - Pixel width of the bar stroke    
    barStrokeWidth : 2,
    
    //Number - Spacing between each of the X value sets
    // 柱状块与x值所形成的线（如：x=20这条线）之间的距离
    barValueSpacing : 5,
    
    //Number - Spacing between data sets within X values
    // 在同一x值内的柱状块之间的间距
    barDatasetSpacing : 1,
    
    //Boolean - Whether to animate the chart
    animation : true,

    //Number - Number of animation steps
    animationSteps : 60,
    
    //String - Animation easing effect
    animationEasing : "easeOutQuart",

    //Function - Fires when the animation is complete
    onAnimationComplete : null
    
}
复制代码
复制代码

雷达图或蛛网图（Radar chart）

复制代码
复制代码 
<!doctype html>
<html>
    <head>
        <title>Radar Chart</title>
        <script src="../Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
            canvas{
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" height="450" width="450"></canvas>


    <script>

        var radarChartData = {
            labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
            datasets : [
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    data : [65,59,90,81,56,55,40]
                },
                {
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    data : [28,48,40,19,96,27,100]
                }
            ]
            
        }

    var myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData,{scaleShowLabels : false, pointLabelFontSize : 10});
    
    </script>
    </body>
</html>
复制代码
复制代码

效果如下

图表选项，内容基本如上，不一一注释

复制代码
复制代码 
Radar.defaults = {
                
    //Boolean - If we show the scale above the chart data            
    scaleOverlay : false,
    
    //Boolean - If we want to override with a hard coded scale
    scaleOverride : false,
    
    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : null,
    //Number - The value jump in the hard coded scale
    scaleStepWidth : null,
    //Number - The centre starting value
    scaleStartValue : null,
    
    //Boolean - Whether to show lines for each scale point
    scaleShowLine : true,

    //String - Colour of the scale line    
    scaleLineColor : "rgba(0,0,0,.1)",
    
    //Number - Pixel width of the scale line    
    scaleLineWidth : 1,

    //Boolean - Whether to show labels on the scale    
    scaleShowLabels : false,
    
    //Interpolated JS string - can access value
    scaleLabel : "<%=value%>",
    
    //String - Scale label font declaration for the scale label
    scaleFontFamily : "'Arial'",
    
    //Number - Scale label font size in pixels    
    scaleFontSize : 12,
    
    //String - Scale label font weight style    
    scaleFontStyle : "normal",
    
    //String - Scale label font colour    
    scaleFontColor : "#666",
    
    //Boolean - Show a backdrop to the scale label
    scaleShowLabelBackdrop : true,
    
    //String - The colour of the label backdrop    
    scaleBackdropColor : "rgba(255,255,255,0.75)",
    
    //Number - The backdrop padding above & below the label in pixels
    scaleBackdropPaddingY : 2,
    
    //Number - The backdrop padding to the side of the label in pixels    
    scaleBackdropPaddingX : 2,
    
    //Boolean - Whether we show the angle lines out of the radar
    // 是否显示角度线
    angleShowLineOut : true,
    
    //String - Colour of the angle line
    // 角度线的颜色
    angleLineColor : "rgba(0,0,0,.1)",
    
    //Number - Pixel width of the angle line
    // 角度线的线宽
    angleLineWidth : 1,            
    
    //String - Point label font declaration
    pointLabelFontFamily : "'Arial'",
    
    //String - Point label font weight
    pointLabelFontStyle : "normal",
    
    //Number - Point label font size in pixels    
    pointLabelFontSize : 12,
    
    //String - Point label font colour    
    pointLabelFontColor : "#666",
    
    //Boolean - Whether to show a dot for each point
    pointDot : true,
    
    //Number - Radius of each point dot in pixels
    pointDotRadius : 3,
    
    //Number - Pixel width of point dot stroke
    pointDotStrokeWidth : 1,
    
    //Boolean - Whether to show a stroke for datasets
    datasetStroke : true,
    
    //Number - Pixel width of dataset stroke
    datasetStrokeWidth : 2,
    
    //Boolean - Whether to fill the dataset with a colour
    datasetFill : true,
    
    //Boolean - Whether to animate the chart
    animation : true,

    //Number - Number of animation steps
    animationSteps : 60,
    
    //String - Animation easing effect
    animationEasing : "easeOutQuart",

    //Function - Fires when the animation is complete
    onAnimationComplete : null
    
}
复制代码
复制代码

极地区域图（Polar area chart）

复制代码
复制代码 
<!doctype html>
<html>
    <head>
        <title>Polar Area Chart</title>
        <script src="../Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
        </style>
    </head>
    <body>
        <canvas id="canvas" height="400" width="400"></canvas>


    <script>
    var chartData = [
            {
                value : Math.random(),
                color: "#D97041"
            },
            {
                value : Math.random(),
                color: "#C7604C"
            },
            {
                value : Math.random(),
                color: "#21323D"
            },
            {
                value : Math.random(),
                color: "#9D9B7F"
            },
            {
                value : Math.random(),
                color: "#7D4F6D"
            },
            {
                value : Math.random(),
                color: "#584A5E"
            }
        ];
    var myPolarArea = new Chart(document.getElementById("canvas").getContext("2d")).PolarArea(chartData);
    </script>
    </body>
</html>
复制代码
复制代码

效果如下

图表选项

复制代码
复制代码 
PolarArea.defaults = {
                
    //Boolean - Whether we show the scale above or below the chart segments
    scaleOverlay : true,
    
    //Boolean - If we want to override with a hard coded scale
    scaleOverride : false,
    
    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : null,
    //Number - The value jump in the hard coded scale
    scaleStepWidth : null,
    //Number - The centre starting value
    scaleStartValue : null,
    
    //Boolean - Show line for each value in the scale
    scaleShowLine : true,
    
    //String - The colour of the scale line
    scaleLineColor : "rgba(0,0,0,.1)",
    
    //Number - The width of the line - in pixels
    scaleLineWidth : 1,
    
    //Boolean - whether we should show text labels
    scaleShowLabels : true,
    
    //Interpolated JS string - can access value
    scaleLabel : "<%=value%>",
    
    //String - Scale label font declaration for the scale label
    scaleFontFamily : "'Arial'",
    
    //Number - Scale label font size in pixels    
    scaleFontSize : 12,
    
    //String - Scale label font weight style    
    scaleFontStyle : "normal",
    
    //String - Scale label font colour    
    scaleFontColor : "#666",
    
    //Boolean - Show a backdrop to the scale label
    scaleShowLabelBackdrop : true,
    
    //String - The colour of the label backdrop    
    scaleBackdropColor : "rgba(255,255,255,0.75)",
    
    //Number - The backdrop padding above & below the label in pixels
    scaleBackdropPaddingY : 2,
    
    //Number - The backdrop padding to the side of the label in pixels    
    scaleBackdropPaddingX : 2,

    //Boolean - Stroke a line around each segment in the chart
    segmentShowStroke : true,
    
    //String - The colour of the stroke on each segement.
    segmentStrokeColor : "#fff",
    
    //Number - The width of the stroke value in pixels    
    segmentStrokeWidth : 2,
    
    //Boolean - Whether to animate the chart or not
    animation : true,
    
    //Number - Amount of animation steps
    animationSteps : 100,
    
    //String - Animation easing effect.
    animationEasing : "easeOutBounce",

    //Boolean - Whether to animate the rotation of the chart
    animateRotate : true,
    
    //Boolean - Whether to animate scaling the chart from the centre
    animateScale : false,

    //Function - This will fire when the animation of the chart is complete.
    onAnimationComplete : null
}
复制代码
复制代码

饼图（Pie chart）

复制代码
复制代码 
<!doctype html>
<html>
    <head>
        <title>Radar Chart</title>
        <script src="../Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
            canvas{
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" height="450" width="450"></canvas>


    <script>

        var pieData = [
                {
                    value: 30,
                    color:"#F38630"
                },
                {
                    value : 50,
                    color : "#E0E4CC"
                },
                {
                    value : 100,
                    color : "#69D2E7"
                }
            
            ];

    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);
    
    </script>
    </body>
</html>
复制代码
复制代码

效果如下

图表选项

复制代码
复制代码 
Pie.defaults = {
    //Boolean - Whether we should show a stroke on each segment
    // 块和块之间是否有间距
    segmentShowStroke : true,
    
    //String - The colour of each segment stroke
　　// 块和块之间间距的颜色
    segmentStrokeColor : "#fff",
    
    //Number - The width of each segment stroke
　　// 块和块之间间距的宽度
    segmentStrokeWidth : 2,
    
    //Boolean - Whether we should animate the chart    
    //是否为图标添加动画效果
    animation : true,
    
    //Number - Amount of animation steps
    //动画步骤数
    animationSteps : 100,
    
    //String - Animation easing effect
    //动画特效名称
    animationEasing : "easeOutBounce",
    
    //Boolean - Whether we animate the rotation of the Pie
　　// 是否有从0度到360度的动画
    animateRotate : true,

    //Boolean - Whether we animate scaling the Pie from the centre
　　// 是否有从中心到边缘的动画
    animateScale : false,
    
    //Function - Will fire on animation completion.
    //动画结束时调用的回调函数
    onAnimationComplete : null
}

环形图（Doughnut chart）

<! doctype html > 
<html>
    <head>
        <title>Doughnut Chart</title>
        <script src="../Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
            canvas{
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" height="450" width="450"></canvas>


    <script>

        var doughnutData = [
                {
                    value: 30,
                    color:"#F7464A"
                },
                {
                    value : 50,
                    color : "#46BFBD"
                },
                {
                    value : 100,
                    color : "#FDB45C"
                },
                {
                    value : 40,
                    color : "#949FB1"
                },
                {
                    value : 120,
                    color : "#4D5360"
                }
            
            ];

    var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData);
    
    </script>
    </body>
</html>
复制代码
复制代码

效果如下

图标选项

复制代码
复制代码 
Doughnut.defaults = {
    //Boolean - Whether we should show a stroke on each segment
    //块和块之间是否有间距
    segmentShowStroke : true,
    
    //String - The colour of each segment stroke
    //块和块之间间距的颜色
    segmentStrokeColor : "#fff",
    
    //Number - The width of each segment stroke
    //块和块之间间距的宽度
    segmentStrokeWidth : 2,
    
    //The percentage of the chart that we cut out of the middle.
    //从中间裁剪出来的图表的百分比
    percentageInnerCutout : 50,
    
    //Boolean - Whether we should animate the chart    
    //是否为图表增加动画
    animation : true,
    
    //Number - Amount of animation steps
    //动画特效步骤数
    animationSteps : 100,
    
    //String - Animation easing effect
    //动画特效名称
    animationEasing : "easeOutBounce",
    
    //Boolean - Whether we animate the rotation of the Doughnut
    //是否为图表添加动画旋转
    animateRotate : true,

    //Boolean - Whether we animate scaling the Doughnut from the centre
    //是否有从中心到边缘的动画
    animateScale : false,
    
    //Function - Will fire on animation completion.
    //动画结束时调用的回调函数
    onAnimationComplete : null
}
sensus森森
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Google Earth Engine（GEE）——建立一个图表（ui.Chart.array.values）chart散点图
qq_31988139的博客
09-20 1097
使用ui.Chart.*代替。从一个数组生成一个图表。沿着给定的轴为每个一维矢量绘制单独的系列图。X轴 = 沿轴的数组索引，可选择用xLabels来标记。Arguments:沿着图表的X轴的刻度线的标签。
利用chartjs生成图表
流星球
12-13 2584
说明下面是如何利用chartjs生成图表，引用好Chart.js之后我们就可以直接使用了。很方便就可以生成了。还有很多其他格式，以后会再详细介绍如何使用。html<canvas id="canvas" height="400" width="500"></canvas>JSvar json = [ {"company_name":"project A", "present_worth":"81531
数据可视化(1)--Chart.js
weixin_34162228的博客
12-11 231
Chart.js是一个HTML5图表库，使用canvas元素来展示各式各样的客户端图表，支持折线图、柱形图、雷达图、饼图、环形图等。在每种图表中，还包含了大量的自定义选项，包括动画展示形式。 Chart.js比较轻量（gzip版本仅4.5k），且不依赖其他库。 项目官网：http://www.chartjs.org/ 曲线图（Line chart） &lt;!doctype html&g...
HTML5 图形和数据可视化秘籍（二）
最新发布
龙哥盟
07-12 866
原文：zh.annas-archive.org/md5/6DD5FA08597C1F517B2FC929FBC4EC5A 译者：飞龙 协议：CC BY-NC-SA 4.0 第三章：创建基于笛卡尔的图表 在本章中，我们将涵盖以下主题： 从头开始构建条形图 在散点图中传播数据 构建线图 创建飞行砖图（瀑布图） 构建蜡烛图（股票图） 介绍 我们放大的第一个图表/图表是最受欢迎和最简单的创建。我们可以粗略地将它们分类为基于笛卡尔的图表。总的来说，这种图表风格相对简单；它为探索数据的惊人创
E-Charts数据可视化
TimeMoments的博客
12-15 1887
数据可视化 一、展示方法 1).Jfreechart:免费，功能一般，效果一般(不怎么绚丽)，但是是之前的产物， 以前用的比较多，现在用的比较少了(建议以了解为主) 2).e-charts:免费，百度出产的，功能强大，效果(绚丽)，近几年的产物，现 在国内的众多软件公司用的比较多(推荐学习) 3).Hight-charts:国外产生，功能强大，效果绚丽，据说XX是抄袭他的，在国 内用的比较少(也是建议了解) 二、图表工具的作用以及原则 1).作用 1>.清晰直观的使得数据可视化
关于数据可视化Chartjs，Highcharts用法
好好学习
11-25 5913
做数据显示时总需要各种图表，显示的更形象，什么饼状图，柱状图的。常用的就是Chart.js。或者Highchartsjs写的 chartjs可以方便的绘制出各种图形，同时对数据进行切换。chartjs是canvas写的，所以 var ctx = document.getElementById("canvas"); Highchartsjs则是svg绘制。 以线形图为例 ...
用chart.js实现数据的可视化处理
kongge123456的博客
02-03 338
利用chart.js 这一个图像处理库实现对象可视化处理。 1、在chart.js 的官网下载js库：地址：https://github.com/chartjs/Chart.js/releases 2、在文件中引入js库： <script type="text/javascript" src="Chart.js/Chart.bundle.js"></script> 3、建...
网页模板——vue.js实现的销售数据柱状图表统计特效源码.zip
11-23
由于没有给出具体的标签，我们无法得知更多关于该项目的特定信息，比如它是否包含其他数据可视化库（如ECharts、Chart.js或D3.js），或者是否采用了现代前端构建工具（如Webpack或Vite）。不过，可以推测，作为Vue....
gauge-chart-js:基于chart.js甜甜圈图的仪表图实现
05-18
标题中的“gauge-chart-js”是一个专用于创建仪表盘图表的JavaScript库，它基于另一个流行的图表库——Chart.js。Chart.js是一个轻量级且易于使用的库，能够帮助开发者快速生成各种图表，包括条形图、饼图、线图等。...
chart.js v2.5.0 全部资料
05-14
Chart.js是一款轻量级的JavaScript图表库，以其简洁的API和高效的数据可视化能力深受前端开发者的喜爱。在v2.5.0版本中，Chart.js进行了重大升级，引入了许多新特性，提升了性能和用户体验。本篇文章将详细介绍Chart...
超好用的canvas交互库——Fabric.js（1）
weixin_39285322的博客
06-01 2070
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
html5 图库
03-29
html5 图库
HTML5漂亮的web系统一整套图标
05-21
HTML5漂亮的web系统图标集，格式是png的，一整套的。
echarts.js
10-19
echarts官网下的js,用于方便以后使用数据图，地图等时用。
数据可视化利用Chart.js图表工具简单案例展示
z_ipython的博客
07-05 1193
数据可视化 Chart Echart 使用HTML+js绘制图表 Restful 网站接口 Json 是在web服务直接传到的一种数据类型，类似python的字典 Ajax 局部提交,只是提交一部分网页，数据通过js返回 使用Chart.js和jquery.js 数据提供： import random import time import json now = time.strf...
chartjs
刚刚好
07-14 423
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" co
FontAwesome---HTML5图标库
skyxc233的博客
03-15 509
本文同步于个人博客 ： 蝴蝶飞不过沧海 | Blog 本文链接 Font Awesome 官网 Font Awesome 中文网 此图标库付费版比免费版要多出很多，如有需要可购入付费版 你只需在网站引入css样式 <html> <head> <link href="https://cdn.jsdelivr.net/gh/skyxingcheng/ic-cdn@master/static/css/font-awesome.min.css" rel="stylesheet">
chart.js图表，饼状图，柱状图，折线图
qq_41427602的博客
11-21 7325
最近项目中有用到大量的图表，所以自学下chart.js,在这里做个记录以免时间长了容易忘记。 cdn地址可以直接使用: https://cdn.bootcss.com/Chart.js/2.7.3/Chart.js    chart.js源码：https://github.com/nnnick/Chart.js chart.js 英文文档：http://www.chartjs.org/doc...
echarts.js 官网
叶落无痕的博客
10-07 7401
echarts.js 官网 http://echarts.baidu.com/ 效果： 代码： updated:function(){ this.$nextTick(function () { /**************************************************** 大数据页面 str************************************************************/ var oUserc...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值