温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-10-30 19:01:01 来源:亿速云 阅读:190 作者:小新 栏目:互联网科技

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

1、 Chart.js

Chart.js 是一个开源的 JavaScript 库,你可以在自己的应用中用它创建生动美丽和交互式的图表。使用它需要遵循 MIT 协议。

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

示例代码如下,它使用该库绘制了一个条形图。本例中我们使用 Chart.js 的内容分发网络(CDN)来包含这个库。注意这里使用的数据仅用于展示。

<!DOCTYPE html><html><head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script></head> <body>       <canvas id="bar-chart" width=300" height="150"></canvas>      <script>     new Chart(document.getElementById("bar-chart"), {    type: 'bar',    data: {      labels: ["North America", "Latin America", "Europe", "Asia", "Africa"],      datasets: [        {          label: "Number of developers (millions)",          backgroundColor: ["red", "blue","yellow","green","pink"],          data: [7,4,6,9,3]        }      ]    },    options: {      legend: { display: false },      title: {        display: true,        text: 'Number of Developers in Every Continent'      },       scales: {            yAxes: [{                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图表库有哪些”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI