zoukankan html css js c++ java

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; 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; 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;
     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;
     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;
     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;
     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;
     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;
     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>

结束，谢谢！

查看全文

相关阅读:
java环境变量配置
 单文档中自定义文件打开对话框和保存对话框
 汇编小知识（二）
汇编指令
 汇编小知识(一)
data directory（数据目录）之引出表
 data directory（数据目录）之引入表
 PE Header中的Optional Header中的最后一个成员变量data directory（数据目录）
紧跟在PE Header后面的Section Table（节表）
PE Header中的OptionalHeader

原文地址：https://www.cnblogs.com/wjw1014/p/8965735.html