最好的3个开源JavaScript图表库

发布时间：2018-09-26 18:34:47 所属栏目：Windows 来源：Dr.michael J.garbade

导读：【新品产上线啦】51CTO播客，随时随地，碎片化学习图表及其它可视化方式让传递数据的信息变得更简单。对于数据可视化和制作精美网站来说，图表和图形很重要。视觉上的展示让分析大块数据及传递信息变得更简单。JavaScript 图表库能让数据以极好的、易于理

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

<!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() 之后调用的方法会为数据中的每一个项目调用一次。

代码的执行结果如下。

最好的3个开源JavaScript图表库

总结

JavaScript 图表库提供了强大的工具，你可以将自己的网络资源进行数据可视化。通过这三个开源库，你可以把自己的网站变得更好看，更容易使用。

你知道其它强大的用于创造 JavaScript 动画效果的前端库吗？请在下方的评论区留言分享。

【编辑推荐】

Linux桌面中4个开源媒体转换工具
不造假！如何让你的开源项目在一周内收集3500个Github star？
再添开源项目！腾讯AILab开源业内最大规模多标签图像数据集
开源软件受云服务商影响，共用条款终止开源滥用现象
面向敏捷开发团队的7个开源项目管理工具

【责任编辑：庞桂玉 TEL：（010）68476606】
点赞 0

（编辑：信阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

5/5

首页