小编给大家分享一下Chart.js轻量级图表库怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联2013年至今,是专业互联网技术服务公司,拥有项目网站制作、做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元渌口做网站,已为上家服务,为渌口各地企业和个人服务,联系电话:18980820575技术选型
研究了Highcharts、百度的ECharts、阿里的G2和Charts.js四个图表库,由于项目对图表需求不大,图表不复杂,所以引入了轻量级的Charts.js。Chart.js很容易上手,只需要在页面中引用脚本文件,并创建
引入
GitHUb上下载源码,把里面的dist/Chart.bundle.js文件引入项目即可使用;查看源码,发现其兼容了多种模块加载方式,所以我使用requireJs在页面中加载。
使用经验
①图表颜色值个数可以不与数据个数相等,如
var pieConfig = { type: 'pie', data: { datasets: [{ data: [10, 20], backgroundColor: ['#debd5a', '#ff6d4a', '#3cc9bf', '#7599e9',] }] } }
②可以取消响应式options: {responsive: false},方便控制图表的大小,canvas多大图表便多大,canvas不会自动占满外层容器。
③取消legend的点击事件,因为点击legend会默认隐藏该数据的占比,所以我需要去掉点击事件,设置legend: {onClick: function () {}},修改点击事件。
④把legend由默认的矩形修改成正方形,设置legend的字体大小和色值
options: { legend: { position: 'right', labels: { boxWidth: 14,// 修改宽度 fontSize: 14, fontColor: '#666666' } }
效果如下
⑤柱状图去掉网格线,设置轴线颜色、矩形的宽度和y轴数据从0开始展示。由于使用的Chart.js 2.0,配置参数变化很多,所以网上很多列子已失效,这里给出有效的配置代码
options: { scales: { xAxes: [{ gridLines: { color: 'rgba(0, 0, 0, 0)',// 隐藏x轴方向轴线 zeroLineColor: '#666666'// 设置轴颜色 }, barPercentage: 0.2,// 设置柱宽度 ticks: {// 设置轴文字字号和色值 fontSize: 12, fontColor: '#666666' } }], yAxes: [{ gridLines: { color: 'rgba(0, 0, 0, 0)',// 隐藏要y轴轴线 zeroLineColor: '#666666' }, ticks: { fontSize: 12, beginAtZero: true,// y轴数据从0开始展示 fontColor: '#666666' } }] } }
效果如下
⑥给图表tooltips的数据加上单位,可以使用tooltips的callback函数设置
tooltips: { callbacks: { label: function (tooltipItem, data) { var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '%'; var title = data.labels[tooltipItem.index] + ':'; return title + value; } } }
效果如下
tooltips: { callbacks: { label: function (tooptipItem) { return tooptipItem.yLabel + '个' ; } } }
效果如下
以上是“Chart.js轻量级图表库怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。