HTML5 Chart.js 框架

Chart.js 概述：

chart.js 是一个简单的、面向对象、为设计者开发者准备的图表绘制工具。

点击进入官方网址

chart.js 的特点

基于 HTML5

　　chart.js 基于 HTML5 canvas 技术，支持所有主流浏览器。

　　针对 IE7/IE8 提供了降级解决方案。

简单灵活

　　chart.js 不依赖任何外部工具库，轻量级（压缩后仅仅4.5K）。

　　提供了加载外部参数的方法。

chart.js 的功能

chart.js 可以用不同的方式让数据变得可视化。

每种类型的图标都有动画效果。

图标的类型：

　　- 柱状图　　- 曲线图　　- 雷达图　　- 饼状图　　- 极地区域图　　- 环形图

chart.js 基础

　　这个网址，引入 chart 文件。

　　OK，以后就可以在本地使用 chart.js 文件了，不需要再导入网址，没网也可以用了。

简单基础案例代码

<!-- 导入之前讲解保存好的 js 文件 -->
<script src="mychat.js"></script> 

<p style="border: 1px solid #999999; width:600px ;height:450px">

  <canvas id="canvas" width="600" height="450"></canvas>

</p>

<script type="text/javascript">
  var ctx = document.getElementById("canvas").getContext("2d");
  // 创建一个Chart对象
  var mychart = new Chart(ctx,{
    type:"bar",  // 柱状图
    data:{   // 数据：json集合
      labels:["A","B","C"],  // 横坐标轴
      datasets:[   // 各个列数据 ： json
        {
          data:[11,15,8]  
        }
      ]
    },
    options:{
      scales:{
        yAxes:[
          {
            ticks:{
              beginAtZero:true  
            }
          }
        ]
      }
    }
  })

</script>

查看官方文档

就进入了 chart.js 的官方文档，但是比较慢，哈哈，等吧，但是还有一个问题，就是他这个文档是英文的。对！ English！

官网文档基础案例

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

chart.js 基础案例

<!-- 导入之前讲解保存好的 js 文件 -->
<script src="mychat.js"></script>

<p style="border: 1px solid #999999; width:600px ;height:450px">

  <canvas id="canvas" width="600" height="450"></canvas>

</p>

<script type="text/javascript">
  var ctx = document.getElementById("canvas").getContext("2d");
  // 创建一个Chart对象
  var mychart = new Chart(ctx,{
    type:"bar",  // 柱状图
    data:{   // 数据：json集合
      labels:["A","B","C"],  // 帮助我们创出X轴坐标点内容
      datasets:[  // 一个统计图表可以有多个图表
        {
          label:"hhh",   // 标题
          data:[11,15,8],  // X轴各坐标点的数值
          backgroundColor: [  //  条形图 颜色
               'rgba(255, 99, 132, 0.2)',
               'rgba(54, 162, 235, 0.2)',
               'rgba(255, 206, 86, 0.2)'
           ],
           borderColor: [  // 条形图 边框颜色
               'rgba(255,99,132,1)',
               'rgba(54, 162, 235, 1)',
               'rgba(255, 206, 86, 1)'
           ],
           borderWidth: 3 // 边框宽度
        },
        {
          label:"hhh",   // 标题
          data:[11,15,8],  // X轴各坐标点的数值
          backgroundColor: [  //  条形图 颜色
               'rgba(255, 99, 132, 0.2)',
               'rgba(54, 162, 235, 0.2)',
               'rgba(255, 206, 86, 0.2)'
           ],
           borderColor: [  // 条形图 边框颜色
               'rgba(255,99,132,1)',
               'rgba(54, 162, 235, 1)',
               'rgba(255, 206, 86, 1)'
           ],
           borderWidth: 3 // 边框宽度
        }
      ]
    },
    options:{
      scales:{  // 刻度 - Y轴刻度
        yAxes:[
          {
            ticks:{
              beginAtZero:true  // 刻度从 0 开始。
            }
          }
        ]
      },
      layout:{
        padding:{  // 设置内边距
          left:50,
          right:0,
          top:0,
          bottom:0
        }
      },
      legend:{  // 设置标题的颜色
        display:true,
        labels:{
          fontColor :"rgb(255,99,132)"
        }
      },
      title:{  // 设置标题
        display:true,
        text:"这是个标题"
      }
    }
  });

</script>

chart.js 的使用

chart.js 曲线图 line

代码案例

<style>
  .chart-container{
    position: relative;
    border: 1px solid #999999;
    margin: auto;
    width: 80vw;
    height: 80vh;
    text-align: center;
  }
</style>

 <script src="mychat.js"></script>

<p class="chart-container">
  <select id="type" class="" name="type">
    <option value="line">曲线图</option>
  </select>
  <button type="button" onclick="changetype()" >生成图表</button>
  <canvas id="myChart"></canvas>
</p>

<script type="text/javascript">
  var ctx = document.getElementById("myChart").getContext("2d");
  var  t = document.getElementById('type').value;
  var d={
    // X 轴显示的文本
    labels:["Sun","Mon","Tue","Wed","Thr","Fri","Sat"],
    datasets:[
      {
        label:"大蜥蜴",
        // 数据集
        data:[parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100)],
        // 边框宽度
        borderWidth:1,
        backgroundColor:[
          'rgba(132,99,244,0.2)',
          'rgba(235,33,244,0.2)',
          'rgba(132,145,158,0.2)',
          'rgba(111,99,54,0.2)',
          'rgba(132,99,144,0.2)',
          'rgba(145,32,25,0.2)',
          'rgba(58,125,222,0.2)'
        ],
        borderColor:[
          'rgba(132,99,244,1)',
          'rgba(235,33,244,1)',
          'rgba(132,145,158,1)',
          'rgba(111,99,54,1)',
          'rgba(132,99,144,1)',
          'rgba(145,32,25,1)',
          'rgba(58,125,222,1)'
        ]
      },
      {
        label:"猪猪侠",
        data:[parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100)],
        borderWidth:1
      }
    ]
  };
  var o ={
    maintainAspectRation:false, // 自动适配，自动根据父容器调整大小。
    scales:{  // 刻度
      yAxes:[
        {
          // ticks:{beginAtZero:true} // 刻度从零开始。
          gridLines:{
            display:false
          }  // 显示竖线。
        }
      ],
      xAxes:[
        {
          gridLines:{
            display:false
          }
        }
      ]
    }

  };
  function changetype() {
    t = document.getElementById('type').value;
    new Chart( ctx , { type: t , data: d , options: o } );
  }

</script>

chart.js 柱状图 bar

案例代码

<style>
  .chart-container{
    position: relative;
    border: 1px solid #999999;
    margin: auto;
    width: 80vw;
    height: 80vh;
    text-align: center;
  }
</style>

 <script src="mychat.js"></script>

<p class="chart-container">
  <select id="type" class="" name="type">
    <option value="line">曲线图</option>
    <option value="bar">柱状图</option>
  </select>
  <button type="button" onclick="changetype()" >生成图表</button>
  <canvas id="myChart"></canvas>
</p>

<script type="text/javascript">
  var ctx = document.getElementById("myChart").getContext("2d");
  var  t = document.getElementById('type').value;
  var d={
    // X 轴显示的文本
    labels:["Sun","Mon","Tue","Wed","Thr","Fri","Sat"],
    datasets:[
      {
        label:"大蜥蜴",
        // 数据集
        data:[parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100)],
        // 边框宽度
        borderWidth:1,
        backgroundColor:[
          'rgba(132,99,244,0.2)',
          'rgba(235,33,244,0.2)',
          'rgba(132,145,158,0.2)',
          'rgba(111,99,54,0.2)',
          'rgba(132,99,144,0.2)',
          'rgba(145,32,25,0.2)',
          'rgba(58,125,222,0.2)'
        ],
        borderColor:[
          'rgba(132,99,244,1)',
          'rgba(235,33,244,1)',
          'rgba(132,145,158,1)',
          'rgba(111,99,54,1)',
          'rgba(132,99,144,1)',
          'rgba(145,32,25,1)',
          'rgba(58,125,222,1)'
        ]
      },
      {
        label:"猪猪侠",
        data:[parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100)],
        borderWidth:1
      }
    ]
  };
  var o ={
    maintainAspectRation:false, // 自动适配，自动根据父容器调整大小。
    scales:{  // 刻度
      yAxes:[
        {
          // ticks:{beginAtZero:true} // 刻度从零开始。
          gridLines:{
            display:false
          }  // 显示竖线。
        }
      ],
      xAxes:[
        {
          gridLines:{
            display:false
          }
        }
      ]
    }

  };
  function changetype() {
    t = document.getElementById('type').value;
    new Chart( ctx , { type: t , data: d , options: o } );
  }

</script>

chart.js 饼状图 pie

案例代码

<style>
  .chart-container{
    position: relative;
    border: 1px solid #999999;
    margin: auto;
    width: 80vw;
    height: 80vh;
    text-align: center;
  }
</style>

 <script src="mychat.js"></script>

<p class="chart-container">
  <select id="type" class="" name="type">
    <option value="line">曲线图</option>
    <option value="bar">柱状图</option>
    <option value="pie">饼图</option>
  </select>
  <button type="button" onclick="changetype()" >生成图表</button>
  <canvas id="myChart"></canvas>
</p>

<script type="text/javascript">
  var ctx = document.getElementById("myChart").getContext("2d");
  var  t = document.getElementById('type').value;
  var d={
    // X 轴显示的文本
    labels:["Sun","Mon","Tue","Wed","Thr","Fri","Sat"],
    datasets:[
      {
        label:"大蜥蜴",
        // 数据集
        data:[parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100)],
        // 边框宽度
        borderWidth:1,
        backgroundColor:[
          'rgba(132,99,244,0.2)',
          'rgba(235,33,244,0.2)',
          'rgba(132,145,158,0.2)',
          'rgba(111,99,54,0.2)',
          'rgba(132,99,144,0.2)',
          'rgba(145,32,25,0.2)',
          'rgba(58,125,222,0.2)'
        ],
        borderColor:[
          'rgba(132,99,244,1)',
          'rgba(235,33,244,1)',
          'rgba(132,145,158,1)',
          'rgba(111,99,54,1)',
          'rgba(132,99,144,1)',
          'rgba(145,32,25,1)',
          'rgba(58,125,222,1)'
        ]
      },
      {
        label:"猪猪侠",
        data:[parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100)],
        borderWidth:1
      }
    ]
  };
  var o ={
    maintainAspectRation:false, // 自动适配，自动根据父容器调整大小。
    scales:{  // 刻度
      yAxes:[
        {
          // ticks:{beginAtZero:true} // 刻度从零开始。
          gridLines:{
            display:false
          }  // 显示竖线。
        }
      ],
      xAxes:[
        {
          gridLines:{
            display:false
          }
        }
      ]
    }

  };
  function changetype() {
    t = document.getElementById('type').value;
    new Chart( ctx , { type: t , data: d , options: o } );
  }

</script>

chart.js 雷达图 radar

案例代码

<style>
  .chart-container{
    position: relative;
    border: 1px solid #999999;
    margin: auto;
    width: 80vw;
    height: 80vh;
    text-align: center;
  }
</style>

 <script src="mychat.js"></script>

<p class="chart-container">
  <select id="type" class="" name="type">
    <option value="line">曲线图</option>
    <option value="bar">柱状图</option>
    <option value="pie">饼图</option>
    <option value="radar">雷达图</option>
  </select>
  <button type="button" onclick="changetype()" >生成图表</button>
  <canvas id="myChart"></canvas>
</p>

<script type="text/javascript">
  var ctx = document.getElementById("myChart").getContext("2d");
  var  t = document.getElementById('type').value;
  var d={
    // X 轴显示的文本
    labels:["Sun","Mon","Tue","Wed","Thr","Fri","Sat"],
    datasets:[
      {
        label:"大蜥蜴",
        // 数据集
        data:[parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100)],
        // 边框宽度
        borderWidth:1,
        backgroundColor:[
          'rgba(132,99,244,0.2)',
          'rgba(235,33,244,0.2)',
          'rgba(132,145,158,0.2)',
          'rgba(111,99,54,0.2)',
          'rgba(132,99,144,0.2)',
          'rgba(145,32,25,0.2)',
          'rgba(58,125,222,0.2)'
        ],
        borderColor:[
          'rgba(132,99,244,1)',
          'rgba(235,33,244,1)',
          'rgba(132,145,158,1)',
          'rgba(111,99,54,1)',
          'rgba(132,99,144,1)',
          'rgba(145,32,25,1)',
          'rgba(58,125,222,1)'
        ]
      },
      {
        label:"猪猪侠",
        data:[parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100)],
        borderWidth:1
      }
    ]
  };
  var o ={
    maintainAspectRation:false, // 自动适配，自动根据父容器调整大小。
    scales:{  // 刻度
      yAxes:[
        {
          // ticks:{beginAtZero:true} // 刻度从零开始。
          gridLines:{
            display:false
          }  // 显示竖线。
        }
      ],
      xAxes:[
        {
          gridLines:{
            display:false
          }
        }
      ]
    }

  };
  function changetype() {
    t = document.getElementById('type').value;
    new Chart( ctx , { type: t , data: d , options: o } );
  }

</script>

chart.js 极地区域图 polarArea

案例代码

<style>
  .chart-container{
    position: relative;
    border: 1px solid #999999;
    margin: auto;
    width: 80vw;
    height: 80vh;
    text-align: center;
  }
</style>

 <script src="mychat.js"></script>

<p class="chart-container">
  <select id="type" class="" name="type">
    <option value="line">曲线图</option>
    <option value="bar">柱状图</option>
    <option value="pie">饼图</option>
    <option value="radar">雷达图</option>
    <option value="polarArea">极地区域图</option>
  </select>
  <button type="button" onclick="changetype()" >生成图表</button>
  <canvas id="myChart"></canvas>
</p>

<script type="text/javascript">
  var ctx = document.getElementById("myChart").getContext("2d");
  var  t = document.getElementById('type').value;
  var d={
    // X 轴显示的文本
    labels:["Sun","Mon","Tue","Wed","Thr","Fri","Sat"],
    datasets:[
      {
        label:"大蜥蜴",
        // 数据集
        data:[parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100)],
        // 边框宽度
        borderWidth:1,
        backgroundColor:[
          'rgba(132,99,244,0.2)',
          'rgba(235,33,244,0.2)',
          'rgba(132,145,158,0.2)',
          'rgba(111,99,54,0.2)',
          'rgba(132,99,144,0.2)',
          'rgba(145,32,25,0.2)',
          'rgba(58,125,222,0.2)'
        ],
        borderColor:[
          'rgba(132,99,244,1)',
          'rgba(235,33,244,1)',
          'rgba(132,145,158,1)',
          'rgba(111,99,54,1)',
          'rgba(132,99,144,1)',
          'rgba(145,32,25,1)',
          'rgba(58,125,222,1)'
        ]
      },
      {
        label:"猪猪侠",
        data:[parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100)],
        borderWidth:1
      }
    ]
  };
  var o ={
    maintainAspectRation:false, // 自动适配，自动根据父容器调整大小。
    scales:{  // 刻度
      yAxes:[
        {
          // ticks:{beginAtZero:true} // 刻度从零开始。
          gridLines:{
            display:false
          }  // 显示竖线。
        }
      ],
      xAxes:[
        {
          gridLines:{
            display:false
          }
        }
      ]
    }

  };
  function changetype() {
    t = document.getElementById('type').value;
    new Chart( ctx , { type: t , data: d , options: o } );
  }

</script>

chart.js 环形图 doughnut

案例代码

<style>
  .chart-container{
    position: relative;
    border: 1px solid #999999;
    margin: auto;
    width: 80vw;
    height: 80vh;
    text-align: center;
  }
</style>

 <script src="mychat.js"></script>

<p class="chart-container">
  <select id="type" class="" name="type">
    <option value="line">曲线图</option>
    <option value="bar">柱状图</option>
    <option value="pie">饼图</option>
    <option value="radar">雷达图</option>
    <option value="polarArea">极地区域图</option>
    <option value="doughnut">环形图</option>
  </select>
  <button type="button" onclick="changetype()" >生成图表</button>
  <canvas id="myChart"></canvas>
</p>

<script type="text/javascript">
  var ctx = document.getElementById("myChart").getContext("2d");
  var  t = document.getElementById('type').value;
  var d={
    // X 轴显示的文本
    labels:["Sun","Mon","Tue","Wed","Thr","Fri","Sat"],
    datasets:[
      {
        label:"大蜥蜴",
        // 数据集
        data:[parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100)],
        // 边框宽度
        borderWidth:1,
        backgroundColor:[
          'rgba(132,99,244,0.2)',
          'rgba(235,33,244,0.2)',
          'rgba(132,145,158,0.2)',
          'rgba(111,99,54,0.2)',
          'rgba(132,99,144,0.2)',
          'rgba(145,32,25,0.2)',
          'rgba(58,125,222,0.2)'
        ],
        borderColor:[
          'rgba(132,99,244,1)',
          'rgba(235,33,244,1)',
          'rgba(132,145,158,1)',
          'rgba(111,99,54,1)',
          'rgba(132,99,144,1)',
          'rgba(145,32,25,1)',
          'rgba(58,125,222,1)'
        ]
      },
      {
        label:"猪猪侠",
        data:[parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100),parseInt(Math.random()*100)],
        borderWidth:1
      }
    ]
  };
  var o ={
    maintainAspectRation:false, // 自动适配，自动根据父容器调整大小。
    scales:{  // 刻度
      yAxes:[
        {
          // ticks:{beginAtZero:true} // 刻度从零开始。
          gridLines:{
            display:false
          }  // 显示竖线。
        }
      ],
      xAxes:[
        {
          gridLines:{
            display:false
          }
        }
      ]
    }

  };
  function changetype() {
    t = document.getElementById('type').value;
    new Chart( ctx , { type: t , data: d , options: o } );
  }

</script>

结束，谢谢！

posted @ 2018-04-28 07:44 叫我+V 阅读(615) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！

公告

叫我+V（叫我AddV）

昵称：叫我+V
园龄： 7年1个月
粉丝： 140
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

叫我+V

学习记录仅供参考不可尽信

HTML5 Chart.js 框架

HTML5 Chart.js 框架

Chart.js 概述：

chart.js 的特点

基于 HTML5

简单灵活

chart.js 的功能

chart.js 基础

查看官方文档

chart.js 基础案例

chart.js 的使用

chart.js 曲线图 line

chart.js 柱状图 bar

chart.js 饼状图 pie

chart.js 雷达图 radar

chart.js 极地区域图 polarArea

chart.js 环形图 doughnut

结束，谢谢！

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

最新评论

学习记录 仅供参考 不可尽信

HTML5 Chart.js 框架

Chart.js 概述：

chart.js 的特点

基于 HTML5

简单灵活

chart.js 的功能

chart.js 基础

chart.js 基础案例

chart.js 的使用

chart.js 曲线图 line

chart.js 柱状图 bar

chart.js 饼状图 pie

chart.js 雷达图 radar

chart.js 极地区域图 polarArea

chart.js 环形图 doughnut

结束，谢谢！

公告

搜索

常用链接

最新随笔

积分与排名

随笔档案

相册

学习记录仅供参考不可尽信