最好的3个开源JavaScript图表库(3)

发布时间：2018-09-26 17:30 所属栏目：117 来源：Dr.michael J.garbade

导读：示例代码如下，它使用该库绘制了一个简单的条形图。 !DOCTYPE html html head style .chart div { font: 15px sans-serif; background-color: lightblue; text-align: right; padding:5px; margin:5px; color: whit

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

<!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

（编辑：ASP站长网）