加入收藏 | 设为首页 | 会员中心 | 我要投稿 青岛站长网 （https://www.0532zz.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 服务器 > 搭建环境 > Windows > 正文

最好的3个开源JavaScript图表库

发布时间：2018-10-06 17:16:55 所属栏目：Windows 来源：Dr.michael J.garbade
导读：【新品产上线啦】51CTO播客，随时随地，碎片化学习 图表及其它可视化方式让传递数据的信息变得更简单。 对于数据可视化和制作精美网站来说，图表和图形很重要。视觉上的展示让分析大块数据及传递信息变得更简单。JavaScript 图表库能让数据以极好的、易于理

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>   
  4.     <link href="https//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />   
  5.     <style>
  6.         .ct-series-a .ct-slice-pie {
  7.             fill: hsl(100, 20%, 50%); /* filling pie slices */
  8.             stroke: white; /*giving pie slices outline */          
  9.             stroke-width: 5px;  /* outline width */
  10.           } 
  11.           .ct-series-b .ct-slice-pie {
  12.             fill: hsl(10, 40%, 60%);
  13.             stroke: white;
  14.             stroke-width: 5px;
  15.           } 
  16.           .ct-series-c .ct-slice-pie {
  17.             fill: hsl(120, 30%, 80%);
  18.             stroke: white;
  19.             stroke-width: 5px;
  20.           } 
  21.           .ct-series-d .ct-slice-pie {
  22.             fill: hsl(90, 70%, 30%);
  23.             stroke: white;
  24.             stroke-width: 5px;
  25.           }
  26.           .ct-series-e .ct-slice-pie {
  27.             fill: hsl(60, 140%, 20%);
  28.             stroke: white;
  29.             stroke-width: 5px;
  30.           } 
  31.     </style>
  32.      </head> 
  33. <body> 
  34.     <div class="ct-chart ct-golden-section"></div> 
  35.     <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script> 
  36.     <script>       
  37.       var data = {
  38.             series: [45, 35, 20]
  39.             }; 
  40.       var sum = function(a, b) { return a + b };
  41.  
  42.       new Chartist.Pie('.ct-chart', data, {
  43.         labelInterpolationFnc: function(value) {
  44.           return Math.round(value / data.series.reduce(sum) * 100) + '%';
  45.             }
  46.               });
  47.      </script>
  48. </body>
  49. </html>

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

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

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

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

（编辑：青岛站长网）

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

    【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

    建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

    Copygight © 2008-2022 https://www.0532zz.com.cn/ All Rights Reserved. 青岛站长网