3个顶级的JavaScript开源图表库

发布日期:2018-09-14 点击次数:
  图表对于数据可视化和网站的吸引力非常重要。可视化图表可以简化分析大数据和信息传递。JavaScript图表库使用户能够以惊人的、易于理解的和交互式的方式可视化数据,并改进网站设计。
  本文,我们将和大家讨论三个顶级的开源JavaScript图标库
 
  1. Chart.js
  Chart.js是一个开源JavaScript库,允许用户在应用程序上创建动画和交互式图表。
 

  使用Chart.js,可以创建各种令人印象深刻的图表,包括条形图,折线图,面积图,线性比例和散点图。它完全兼容各种设备,并利用HTML5 Canvas元素进行渲染。
  以下是使用该库绘制条形图的示例代码。我们将使用Chart.js内容交付网络(CDN)将其包含在此示例中。请注意,使用的数据只是便于说明使用:
  从这段代码中可以看出,是通过将类型设置为bar来构造条形图。你还可以将它定义为其他类型 - 例如将type设置为horizontalBar。
  通过在backgroundColor数组参数中提供颜色类型来设置条形图的颜色。此代码的输出如下:

 
  2. Chartist.js
  Chartist.js是一个简单的JavaScript动画库,可以作为前端图表生成器。
  在项目中包含Chartist.js库及其CSS文件后,你可以使用它们创建各种类型的图表,包括动画,条形图和折线图,利用SVG动态渲染图表。
  以下是使用该库绘制饼图的代码示例:
  Chartist.js库允许你使用各种预构建的CSS样式,而不是指定项目样式相关的组件,你还可以使用它们来控制创建的图表的外观。
  例如,预先创建的CSS类.ct-chart用于构建饼图的容器,.ct-golden-section类用于获取宽高比,可以使用响应式设计进行缩放,并为你节省计算固定尺寸的麻烦。Chartist还提供了其他类别的容器比率。
  要设置各种饼图样式,可以使用默认值的.ct-series-a class类。字母a与每个系列计数(a,b,c等)一起迭代,使得它与要设置样式的切片相对应。
  示例中使用Chartist.Pie是用于创建饼图。要创建其他类型的图表则选择有所不同,例如折线图是选择Chartist.Line。
  以下是代码输出:

 
  3. D3.js
  D3.js是另一个很棒的开源JavaScript图表库。遵循BSD许可协议。它是最流行的可视化库之一,它被很多其他的表格插件所使用。
 
  你可以通过这个神奇的3D动画库,使用HTML5,SVG和CSS可视化你的数据,让你的网站更具吸引力。从本质上讲,D3使你能够将数据绑定到文档对象模型(DOM),然后将数据驱动转换应用到Document中。
  以下是使用该库绘制简单条形图的示例代码:
  使用D3库的主要方法是首先应用CSS样式选择指向DOM节点,然后应用运算符来操作它们 - 就像在其他DOM框架(如jQuery)中一样。
  将数据绑定到文档后,调用.enter()函数来为传入数据构建新节点。在.enter()函数之后调用的所有方法将针对数据中的每个项调用。
  代码输出结果如下:
  JavaScript图表库帮助我们在Web属性实现数据可视化,通过以上这三个图表库,你就能大大增强网站的美感和互动性,如果你还知道其他强大的JavaScript图表库,欢迎留言分享给大家

  转自:开源最前线
分享到:
×

微信扫一扫分享