好用的开源JavaScript图表库有哪些

技术好用的开源JavaScript图表库有哪些这篇文章主要介绍好用的开源JavaScript图表库有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、 Chart.jsChart.js 是一个

本文主要介绍易于使用的开源JavaScript图表库,非常详细,有一定的参考价值。感兴趣的朋友一定要看!

00-1010chart.js是一个开源的JavaScript库,可以用来在自己的应用程序中创建生动、美观、具有交互性的图表。它需要遵守麻省理工学院的协议。

使用Chart.js,您可以创建各种令人印象深刻的图表和图形,包括条形图、折线图、范围图、线性比例和散点图。它可以响应各种设备,用HTML5 Canvas元素进行绘制。

示例代码如下,使用库绘制条形图。在这个例子中,我们使用Chart.js的内容分发网络(CDN)来包含这个库。请注意,此处使用的数据仅用于说明。

!DOCTYPEhtmlhtmlheadscriptsrc=' https://cdnjs . cloudflare.com/Ajax/libs/chart . js/2 . 5 . 0/chart . min . js '/script/headsdycanvasid=' bar-chart ' width=300 ' height=' 150 '/ralcripitnewchart(document . getelementbyid(' bar-chart '),{type:'bar ',data : { labels :[' north America ','

sp;               ticks: {                    beginAtZero:true                }            }]        }     } });    </script>   </body></html>

如你所见,通过设置 typebar 来构造条形图。你可以把条形体的方向改成其他类型 &mdash;&mdash; 比如把 type 设置成 horizontalBar

backgroundColor 数组参数中提供颜色类型,就可以设置条形图的颜色。

颜色被分配给关联数组中相同索引的标签和数据。例如,第二个标签 “Latin American”,颜色会是 “蓝色(blue)”(第二个颜色),数值是 4(data 中的第二个数字)。

代码的执行结果如下。

好用的开源JavaScript图表库有哪些

2、 Chartist.js

Chartist.js 是一个简单的 JavaScript 动画库,你能够自制美丽的响应式图表,或者进行其他创作。使用它需要遵循 WTFPL 或者 MIT 协议。

这个库是由一些对现有图表工具不满的开发者进行开发的,它可以为设计师或程序员提供美妙的功能。

在项目中包含 Chartist.js 库后,你可以使用它们来创建各式各样的图表,包括动画,条形图和折线图。它使用 SVG 来动态渲染图表。

这里是使用该库绘制一个饼图的例子。

<!DOCTYPE html><html><head>       <link href="https//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />       <style>        .ct-series-a .ct-slice-pie {            fill: hsl(100, 20%, 50%); /* filling pie slices */            stroke: white; /*giving pie slices outline */                      stroke-width: 5px;  /* outline width */          }           .ct-series-b .ct-slice-pie {            fill: hsl(10, 40%, 60%);            stroke: white;            stroke-width: 5px;          }           .ct-series-c .ct-slice-pie {            fill: hsl(120, 30%, 80%);            stroke: white;            stroke-width: 5px;          }           .ct-series-d .ct-slice-pie {            fill: hsl(90, 70%, 30%);            stroke: white;            stroke-width: 5px;          }          .ct-series-e .ct-slice-pie {            fill: hsl(60, 140%, 20%);            stroke: white;            stroke-width: 5px;          }     </style>     </head> <body>     <div class="ct-chart ct-golden-section"></div>     <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>     <script>             var data = {            series: [45, 35, 20]            };       var sum = function(a, b) { return a + b };       new Chartist.Pie('.ct-chart', data, {        labelInterpolationFnc: function(value) {          return Math.round(value / data.series.reduce(sum) * 100) + '%';            }              });     </script></body></html>

使用 Chartist JavaScript 库,你可以使用各种预先构建好的 CSS 样式,而不是在项目中指定各种与样式相关的部分。你可以使用这些样式来设置已创建的图表的外观。

比如,预创建的 CSS 类 .ct-chart 是用来构建饼状图的容器。还有 .ct-golden-section 类可用于获取纵横比,它基于响应式设计进行缩放,帮你解决了计算固定尺寸的麻烦。Chartist 还提供了其它类别的比例容器,你可以在自己的项目中使用它们。

为了给各个扇形设置样式,可以使用默认的 .ct-serials-a 类。字母 a 是根据系列的数量变化的(a、b、c,等等),因此它与每个要设置样式的扇形相对应。

Chartist.Pie 方法用来创建一个饼状图。要创建另一种类型的图表,比如折线图,请使用 Chartist.Line

代码的执行结果如下。

好用的开源JavaScript图表库有哪些

3、 D3.js

D3.js 是另一个好用的开源 JavaScript 图表库。使用它需要遵循 BSD 许可证。D3 的主要用途是,根据提供的数据,处理和添加文档的交互功能,。

借助这个 3D 动画库,你可以通过 HTML5、SVG 和 CSS 来可视化你的数据,并且让你的网站变得更精美。更重要的是,使用 D3,你可以把数据绑定到文档对象模型(DOM)上,然后使用基于数据的函数改变文档。

示例代码如下,它使用该库绘制了一个简单的条形图。

<!DOCTYPE html><html><head>         <style>    .chart div {      font: 15px sans-serif;      background-color: lightblue;      text-align: right;      padding:5px;      margin:5px;      color: white;      font-weight: bold;    }           </style>     </head> <body>     <div class="chart"></div>       <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>     <script>       var data = [342,222,169,259,173];       d3.select(".chart")        .selectAll("div")        .data(data)          .enter()          .append("div")          .style("width", function(d){ return d + "px"; })          .text(function(d) { return d; });         </script></body></html>

使用 D3 库的主要概念是应用 CSS 样式选择器来定位 DOM 节点,然后对其执行操作,就像其它的 DOM 框架,比如 JQuery。

将数据绑定到文档上后,.enter() 函数会被调用,为即将到来的数据构建新的节点。所有在 .enter() 之后调用的方法会为数据中的每一个项目调用一次。

代码的执行结果如下。

好用的开源JavaScript图表库有哪些

以上是“好用的开源JavaScript图表库有哪些”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/59018.html

(0)

相关推荐

  • Python怎样爬取全网美食杰信息

    技术Python怎样爬取全网美食杰信息这期内容当中小编将会给大家带来有关Python怎样爬取全网美食杰信息,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。前言相信很多人是吃货,其实我也是

    攻略 2021年10月25日
  • selenium UI自动化怎么实现

    技术selenium UI自动化怎么实现本篇内容介绍了“selenium UI自动化怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅

    攻略 2021年12月11日
  • oracle temp表空间相关知识点有哪些

    技术oracle temp表空间相关知识点有哪些本篇内容主要讲解“oracle temp表空间相关知识点有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“oracle te

    攻略 2021年11月9日
  • Python使用协程的缺点是什么

    技术Python使用协程的缺点是什么这篇文章给大家分享的是有关Python使用协程的缺点是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1、多核资源不能使用:协程的本质是单线程,它不能同时

    攻略 2021年10月27日
  • Maven:解决IDEA无法下载源码

    技术Maven:解决IDEA无法下载源码 Maven:解决IDEA无法下载源码通过点击进IDEA反编译的代码文件处下载源代码Sources。IDEA提示报错,无法下载源代码。解决办法:
    mvn depe

    礼包 2021年11月22日
  • 论文翻译:2020GCRNLearning Complex Spectral Mapping With Gated Convolutional Recurrent Networks for Monaural Speech Enhancement

    技术论文翻译:2020GCRNLearning Complex Spectral Mapping With Gated Convolutional Recurrent Networks for Monaural Spee

    礼包 2021年12月9日