chart.js轻量级图表插件使用

安装下载

下载地址:https://github.com/chartjs/Chart.js/releases/latest

cdn LINK:https://cdnjs.com/libraries/Chart.js

文档:http://chartjs.cn/docs/

Chart.js有两种不同的版本。常规版本的Chart.js和 Chart.min.js,附带chart.js库的同时还带着颜色解析器。如果你想使用这个版本并且在你的图表中使用时间轴,你需要在安装Chart.js之前安装上Moment.js

而另一个版本Chart.bundle.js Chart.bundle.min.js早就包含了Moment.js 。你唯一需要注意的就是两个版本只能安装一个,否则会引起错误。

一旦你决定好使用哪个版本之后,你就可以在你的项目中引入Chart.js了

<script src="path/to/Chart.min.js"></script>
<script>
    var barChart = new Chart({...})
</script>

使用方法

1创建html标签

<canvas id="barChart" width="600" height="400"></canvas>

注:一般来说,画布的宽度和高度决定了图表的尺寸。但在创建响应式图表时,宽高的数值决定的只是比例。

2创建一个chart类的实例

var barChart = new Chart($("barChart"), {
  type: ‘bar‘,
  data: {
    labels: ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],
    datasets: [{
      label: ‘Population‘,
      data: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398],
      backgroundColor: [
        ‘rgba(255, 99, 132, 0.6)‘,
        ‘rgba(54, 162, 235, 0.6)‘,
        ‘rgba(255, 206, 86, 0.6)‘,
        ‘rgba(75, 192, 192, 0.6)‘,
        ‘rgba(153, 102, 255, 0.6)‘,
        ‘rgba(255, 159, 64, 0.6)‘,
        ‘rgba(255, 99, 132, 0.6)‘,
        ‘rgba(54, 162, 235, 0.6)‘,
        ‘rgba(255, 206, 86, 0.6)‘,
        ‘rgba(75, 192, 192, 0.6)‘,
        ‘rgba(153, 102, 255, 0.6)‘
      ]
    }]
  }
});
//参数详解
第一个位置参数:为之前创建的HTML节点对象,可以用DOM或Jquery获取。
第二个位置参数:是一个Json格式的数据字典,里面内容包括以下
type                 图表类型,可选如下值line()bar(柱状图)radar, polarArea, pie(饼形图)doughnut 以及bubbledata
backgroundColor          区域颜色,与数据对象,可以使用rgba颜色对象,也可以使用rgb字符串如[‘#debd5a,]
 

原文地址:https://www.cnblogs.com/huang99882008/p/11155881.html

时间: 2024-10-19 13:43:48

chart.js轻量级图表插件使用的相关文章

Chart.js | HTML5 图表绘制工具库(知识整理、中文注释、中文文档)

Chart.js:用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕上.基于HTML5 canvas技术,Chart.js不依赖任何外部工具库,轻量级(压缩之后仅有4.5k).值得推荐学习! GitHub源码: https://github.com/nnnick/Chart.js Chart.js文档:http://www.bootcss.com/p/chart.js/ 步骤: html部分: <canvas id="myChart&q

[转] angular2+highcharts+chart.js

这里是在ionic2下使用highchairs和chart.js的简单示例chartjs部分参考http://www.jianshu.com/p/bc18132da812 1.安装hightcharts npm install highcharts --save typings install dt~highcharts --global --save 2.编辑 html文件在html中添加一个div来显示图表 <ion-content class="about"> <

js图表插件

1. Flotr2 Flotr2 是个独立框架库,支持HTML5图表和图形.它是 flotr 的一个分支版本,移除了 Prototype 依赖性,并且有很多改进.支持:线图.条图.蜡状图.饼图.气泡图.诸如 IE6 类的老浏览器也支持. 2. Rickshaw Rickshaw 是个用于创建交互式时序图的JS工具.它依赖 D3 可视化库和其他一些 jQuery 和 jQuery UI 的插件. 3. D3 D3 是一款著名且高效的可视化库. 4. Awesome Chart JS Awesome

chart.js图表库案例赏析,饼图添加文字

chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于 5KB. 前天用了一下,由于以前也稍微用过,今天总结了一下(水平有限,如果问题,请不吝赐教): 开发中文文档:http://www.bootcss.com/p/chart.js/docs/ ch

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文: 默认情况下如下图 Y轴并不是从0开始,这样折现图的幅度会很大,不是正常的幅度,解决办法如下, 示例代码: window.onload = function () { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartDat

js 统计图插件chart.js

chart是一个纯js插件,它功能强大小巧使用也很简单. 第一步引入 chart.js . <script type="text/javascript" src="<%=path%>/js/mapping/Chart.js"></script> 第二步绘制控件 样式可以自己定义但是id不能改变 <canvas id="canvas"  height="600" width="

vue.js 图表chart.js使用

在使用这个chart.js之前,自己写过一个饼图,总之碰到的问题不少,所以能用现成的插件就用,能节省不少时间 这里不打算介绍chart.js里面详细的参数意义和各个参数的用法,只作为首次使用chart.js的一个入门级的说明! 在使用之前,我找到了一个中文的chart.js的文档地址:http://www.bootcss.com/p/chart.js/docs/,打开后发现除了菜单是中文的,其他还是英文的,这个可能是从官方直接扒下来的版本,很久没更新了,部分参数和官方已经差距很大,还是直接看官方

图表插件Charts.js的使用

Charts.js的介绍自行百度 首先下载Charts.js,官网:http://chartjs.cn/ charts.js 托管在了github上,下载下来后加解压出src中的文件即可.其中有charts.js文件,其中就是对其他文件的引用. 开始使用: 具体的使用咋官网Api中都有详细的说明,可自行查阅,传送门:http://www.chartjs.org/docs/#chart-configuration-chart-data <script src="Chart.js"&

使用Vue.js 和Chart.js制作绚丽多彩的图表

前言 深入学习 chart.js 的选项来制作漂亮的图表.交互式图表可以给你的数据可视化提供很酷的展示方式.但是大多数开箱即用的解决方案用默认的选项并不能做出很绚丽的图表. 这篇文章中,我会教你如何自定义 chart.js 选项来制作很酷的图表. ? Quick Start 我们需要: Vue.js vue-chart.js vue-cli 使用 vue-cli 来搭基本架构,希望你已经安装好了.我们使用 vue-chart.js 来作为 chart.js 的打包器. vue init webp