Chart.js使用（一）

——chart.js的引入及对象创建

最近在使用Chart.js做一些报表数据展示，最早看的是Chart.js对应的中文文档，不过发现在调试过程中有各种报错。仔细看了一下，发现中文文档对应的版本内容可能和现在使用的版本不一致导致的。这里记录一下使用时的一些内容，防止下次使用的时候忘记了。

目前使用Chart.js还停留在比较简单的层面，先记录下初始化对象部分。
中文文档中，针对对象初始化部分的示例为：

var ctx =document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);

在使用Chart.js V2.7.1版本时，需做以下调整：

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx,dataset,options);

其中，dataset包含以下内容：

var dataset = {type:'';     //图表类型；[]data:{labels:['标签1','标签2'],//数据横坐标dataset:[{label:'',data:['数据1','数据2'],//数据值backgroundColor:[],//各类型数据展示颜色borderColor:[],borderWidth:1,}]}

对于折线图、条形图等类型，可能出现多个数据显示的情况，dataset中的data字段做以下处理

嗯，这里还没写，需补充

options 参数可空（即new Chart(ctx,dataset)形式），此时，采用默认参数

[1]: Chart.js 英文文档：http://www.chartjs.org/docs/latest/
[2]: Chart.js 下载地址：https://github.com/chartjs/Chart.js/releases/tag/v2.7.1

Chart.js使用（一）相关推荐

原生html js css绘制折现图,HTML5教程 Chart.js自定义提示折线图
本篇教程探讨了HTML5教程 Chart.js自定义提示折线图,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < var randomScalingFactor ...
java 实现雷达图,如何使用y轴为0到100的chart.js创建雷达图？
我目前正在使用Chart.js将我的数据显示为雷达图 . 我面临的问题是,每次我向页面添加数据时,它都会将最大值设置为表中最高值 . 我需要它从0到100的Y轴开始 . 我正在使用Chart.js v ...
JS组件系列——开源免费图表组件：Chart.js
前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...
Vue——vue-chartjs[Vue 对于 Chart.js 的封装]
基本概念 vue-chartjs:vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart ...
python 图表 web_Web | Django 与 Chart.js 联用做出精美的图表
class Country(models.Model):name = models.CharField(max_length=30)class City(models.Model):name = mo ...
chart.js绘制精美的数据化图形--入门示例
参考:http://think.zvan.com.cn/code/js/2014/0607/247.html 这个库基于html5,在360极速浏览器和firefox中测试通过. <html&g ...
Angular Chart.js第三方库ng-chartjs基础使用
Angular Chart.js第三方库ng-chartjs基础使用项目github地址这个项目支持基本的Chart.js图表,并且支持内联插件和全局插件的使用. Demo地址支持图表类型 li ...
Chart.js学习
一.简介 Chart.js是一个基于HTML5的简单的面向对象的图表库,支持包括IE7和8的所有现代浏览器.图表库中有6种表,分别是:曲线图(Linecharts).柱状图(Barcharts).雷达 ...
使用 Vue.js 和 Chart.js 制作绚丽多彩的图表
本文作者:Jakub Juszczak 编译:胡子大哈翻译原文:http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35 ...
html chart标签,用 Chart.js 画扇形图并显示标签
chart.js 扇形图 var ctx = document.getElementById("myChart").getContext('2d'); var myChart = ...

Chart.js使用（一）

——chart.js的引入及对象创建

Chart.js使用（一）相关推荐

最新文章

热门文章