欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

js图表工具---chart.js的使用

程序员文章站 2022-07-13 15:51:52
...

项目中canvas技术的主要用途:

(1)绘制统计图

(2)小游戏

(3)绘图板

(4)动态的背景(带交互带动画)

 

提示:第三方的绘图工具非常多!直接百度"js绘图工具"!

第三方工具的使用步骤:

(1)打开官网,看工具介绍

http://www.chartjs.org/

Simple yet flexible JavaScript charting for designers & developers

    一款开源的,提供了8种图标的,基于canvas,响应式图标绘图工具库

(2)参考demo,编写实例程序

var c=new Chart(canvasId,{

    type:'bar '  ,     //图表类型,共8种

    data:{ }   ,        //图标必须的数据

    option:{ }    ,   //可选项

});

(3)查看API document,实现自己的项目需求

    参考手册中的实例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h3>第三方绘图功能---chart.js的使用</h3>
<canvas id="c15"   width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script>
  var ctx=c15.getContext('2d');
  new Chart(ctx,{
    type:'bar',
    data:{
      labels:['部门1','部门2','部门3','部门4','部门5','部门6'], //x轴说明文字
      datasets:[
        {
          label:'年度销售总结',
          data:[400,300,500,200,500,480]
        }
      ]
    },
    options:{
      responsive:false,
      scales:{
        yAxes:[{
          ticks:{
            beginAtZero:true,
          }
        }]
      }
    }
  });
</script>
</body>
</html>

 

相关标签： html5图表 js图表 chart.js

上一篇： d3js柱状图

下一篇： 用 echarts 绘制双 x 轴折线图（Multiple x Axes）

推荐阅读