专栏首页Devops专栏canvasjs 图表库的入门介绍

canvasjs 图表库的入门介绍

官网

canvasjs图标库的官网:https://canvasjs.com/jquery-charts/

下载示例代码

进入这个下载页面之后,就可以直接下载的了。

查看下载好的示例代码

可以看到主要有11个示例,下面随便点击任意一个示例来看看。

查看 01 - overview 的图表示例

进入查看 overview 图表示例里面也有16个示例,可以说是真的示例图很丰富。

下面打开几个图表来看看。

animated-chart.html

chart-from-json-data.html

chart-with-axis-scale-breaks.html

chart-with-crosshair.html

chart-with-custom-legend-chart.html

chart-with-image-overlay.html

这里面的图表示例很多,就不一一列举,下面来看看,怎么运用其中一个图表。

修改 interactive-draggable-chart.html 的数据

这个柱形图的填写数据比较简单,所以就用这个来介绍看看。

查看引入了什么js以及css文件

可以从源码看到,这个图表的实现只引用了两个js,以及写了一个div。另外,在文件里面也写了一些js代码。

这里的只需要将 x 和 y 轴的值修改,就可以直接修改图表的内容了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • swiper库入门介绍

    一进入界面就可以看到Swiper 4的标题,直接点击开始使用Swiper,开始入门使用。

    Devops海洋的渔夫
  • Python循环 - 胖子老板来包烟

    因此,大家在编写程序时,应该尽量养成习惯:除非需求的特殊要求,否则 循环 的计数都从 0 开始

    Devops海洋的渔夫
  • Centos7 下 Openresty 从安装到入门

    根据官网的描述提供了不同的安装方式,例如:使用yum安装、源码编译安装等等。我目前暂时使用yum安装方式进行部署看看。

    Devops海洋的渔夫
  • OptaPlanner - 把example运行起来

    经过上面篇长篇大论的理论之后,在开始讲解Optaplanner相关基本概念及用法之前,我们先把他们提供的示例运行起来,好先让大家看看它是如何工作的。...

    Kent Zhang
  • 经验之谈,这16个Excel函数,几乎可以解决80%的数据统计工作!

    在日常工作中,数据统计是工作中最重要的一部分。今天把Excel中最常用的统计函数整理了出来,共16个。为了方便同学们理解,选取的全是贴近应用的示例。

    1480
  • 整理数据时的16个常用Excel函数

    示例:下表D:F列中,如果填充“完成”大于1个,则在G列返回达标,否则返回不达标。

    用户5495712
  • uni-app学习(六)好用的插件4

    老梁
  • Linux常用基本命令总结

    Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的UNIX工...

    AlbertYang
  • Leetcode PHP 罗马数字转整数

    例如, 罗马数字 2 写做 II ,即为两个并列的 1。12 写做 XII ,即为 X + II 。 27 写做  XXVII, 即为 XX + V + II ...

    Debug客栈
  • 编码规范 - 养成良好的Java编码习惯

    恒宇少年

扫码关注云+社区

领取腾讯云代金券