欢迎您光临自学哈网,只为分享网络知识教程,供大家学习参考!

「自学哈网」如何使用Chart.js来创建漂亮图表的所有知识

作者 : 自学哈 本文共1100个字,预计阅读时间需要3分钟 2023-05-9 共90人阅读
也想出现在这里? 联系我们

如何使用Chart.js来创建漂亮图表的所有知识

Chart.js创建漂亮图表的所有知识

Chart.js 中文文档地址:http://www.bootcss.com/p/chart.js/docs/

 

如何使用Chart.js来创建漂亮图表的所有知识

引入Chart.js文件

 

首先我们需要在页面中引入Chart.js文件。此工具库在全局命名空间中定义了Chart变量。

 

<script src=”Chart.js”></script>

 

创建图表

 

为了创建图表,我们要实例化一个Chart对象。为了完成前面的步骤,首先需要需要传入一个绘制图表的2d context。以下是案例。

 

<canvas id=”myChart” width=”400″ height=”400″></canvas>

 

//Get the context of the canvas element we want to select

var ctx = document.getElementById(“myChart”).getContext(“2d”);

var myNewChart = new Chart(ctx).PolarArea(data);

 

我们还可以用jQuery获取canvas的context。首先从jQuery集合中获取我们需要的DOM节点,然后在这个DOM节点上调用 getContext(“2d”) 方法。

 

//Get context with jQuery – using jQuery’s .get() method.

var ctx = $(“#myChart”).get(0).getContext(“2d”);

//This will get the first returned node in the jQuery collection.

var myNewChart = new Chart(ctx);

 

当我们完成了在指定的canvas上实例化Chart对象之后,Chart.js会自动针对retina屏幕做缩放。

 

Chart对象设置完成后,我们就可以继续创建Chart.js中提供的具体类型的图表了。下面这个案例中,我们将展示如何绘制一幅极地区域图(Polar area chart)。

 

new Chart(ctx).PolarArea(data,options);

 

We call a method of the name of the chart we want to create. We pass in the data for that chart type, and the options for that chart as parameters. Chart.js will merge the options you pass in with the default options for that chart type.

本站声明:
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!

自学哈网 » 「自学哈网」如何使用Chart.js来创建漂亮图表的所有知识
也想出现在这里? 联系我们
© 2022 Theme by - 自学哈网 & WordPress Theme. All rights reserved 浙ICP备2022016594号