Plusieurs des bibliothèques de graphiques JavaScript les plus couramment utilisées

Actuellement, la visualisation des données est devenue une partie très importante du domaine de la science des données. Les données générées dans différents systèmes de réseau doivent être correctement visualisées afin d'être mieux présentées aux utilisateurs pour lecture et analyse.

Pour toute organisation, si elle peut obtenir pleinement des données, visualiser des données et analyser des données, cela peut grandement aider à comprendre les raisons profondes de la génération de données afin que des décisions correctes puissent être prises en conséquence.

C'est une grande compétence pour les développeurs front-end de maîtriser les techniques de visualisation de données dans des pages Web interactives. Bien entendu, la visualisation des données frontales deviendra également plus facile grâce à certaines bibliothèques de graphiques JavaScript. Grâce à ces bibliothèques, les développeurs peuvent facilement transformer les données en graphiques faciles à comprendre sans avoir à prendre en compte les défis de programmation liés aux différentes syntaxes.

Voici les 9 bibliothèques de graphiques JavaScript sélectionnées :

Chart.js Chartist FlexChart Echarts NVD3 C3.js TauCharts ReCharts Flot

Chart.js

Chart.js est une bibliothèque de graphiques simple et conviviale et une bibliothèque JavaScript basée sur HTML5 pour créer des tableaux et des graphiques animés, interactifs et personnalisables.

Avec Chart.js, les utilisateurs peuvent visualiser facilement et intuitivement des types de graphiques mixtes. Des pages Web réactives peuvent également être créées à l'aide de Chart.js par défaut.

La bibliothèque Chart.js permet aux utilisateurs de créer rapidement des visualisations de données. Chart.js est facile à configurer et très convivial pour les débutants. Avec Chart.js, vous n'avez pas à vous soucier des problèmes de compatibilité des navigateurs car Chart.js prend en charge les anciens navigateurs.

Utilisez npm pour installer Chart.js :

npm install chart.js --save

Exemple de code Chart.js pour dessiner une carte radar :

const ctx = document.getElementById("myChart");
const options = {
scale: {
// Hides the scale
}
};
const data = {
labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
datasets: [
　　　　　 {
 data: [-10, -5, -3, -15],
 label: "two",
 borderColor: '#ffc63b'
 },
　　　　　{
 data: [10, 5, 3, 10],
 label: "three",
 borderColor: '#1d9a58'
 },
 {
data: [18, 10, 4, 2],
label: "one",
borderColor: '#d8463c'
},
]
}
const myRadarChart = new Chart(ctx, {
data: data,
type: 'radar',
options: options
});
Chartist

La bibliothèque Chartist est idéale pour créer des graphiques magnifiques, réactifs et faciles à lire. Chartist utilise SVG pour restituer les graphiques.

Chartist offre également la possibilité de personnaliser des graphiques à l'aide de requêtes multimédias CSS et d'animations créatives. Les utilisateurs utilisent Chartist pour réaliser toute leur créativité dans la conception de graphiques.

Chartist est facile à configurer et à personnaliser avec Sass. Cependant, il ne prend pas en charge les anciens navigateurs.

En utilisant Chartist, vous pouvez embellir votre SVG grâce aux styles CSS. Les utilisateurs peuvent réaliser complètement tous les styles de graphiques qu'ils souhaitent.

Installez Chartist à l'aide de npm :

npm install chartist --save

Exemple de code Chartist pour créer un diagramme circulaire avec des étiquettes personnalisées :

var data = {
labels: ['Bananas', 'Apples', 'Grapes'],
series: [20, 15, 40]
};
var options = {
labelInterpolationFnc: function(value) {
return value[0]
}
};
var responsiveOptions = [
['screen and (min-width: 640px)', {
chartPadding: 30,
labelOffset: 130,
labelDirection: 'explode',
labelInterpolationFnc: function(value) {
return value;
}
}],
['screen and (min-width: 1024px)', {
labelOffset: 80,
chartPadding: 20
}]
];
new Chartist.Pie('.ct-chart', data, options, responsiveOptions);
FlexChart

FlexChart est un outil graphique haute performance. Grâce à FlexChart, vous pouvez facilement visualiser des données tabulaires dans des graphiques commerciaux. FlexChart prend non seulement en charge les types de graphiques courants, tels que les graphiques linéaires, les diagrammes circulaires, les graphiques en aires, etc., mais prend également en charge les types de graphiques avancés tels que les graphiques à bulles, les graphiques en lignes K, les graphiques à barres et les graphiques en entonnoir.

FlexChart est également très simple à utiliser. Les graphiques FlexChart délèguent toutes les tâches liées aux données à la classe CollectionView. Il vous suffit d'utiliser la classe CollectionView pour implémenter des fonctions telles que le filtrage, le tri et le regroupement des données.

FlexChart contient également des éléments de graphique complets, tels que des légendes de graphiques, des titres de graphiques, des pieds de page de graphiques, des axes, des séries et des étiquettes de graphiques, etc. Les utilisateurs peuvent également ajouter des éléments personnalisés aux graphiques, tels que des lignes moyennes et des tendances. etc.

FlexChart est essentiellement un graphique interactif. Toute modification apportée aux données sera automatiquement reflétée sur le graphique, comme les courbes du graphique zoomant et dézoomant, le filtrage, le forage, l'animation, etc. avec les données.

Voir le guide d'apprentissage du chinois et la démonstration du graphique sunburst de FlexChart.

Exemple de code FlexChart pour dessiner un histogramme :

onload = function() {
// wrap data in a CollectionView so the grid and chart 
// get notifications
var data = new wijmo.collections.CollectionView(getData());
// create the chart
var theChart = new wijmo.chart.FlexChart('#theChart', {
itemsSource: data,
bindingX: 'country',
series: [
{ binding: 'sales', name: 'Sales' },
{ binding: 'expenses', name: 'Expenses' },
{ binding: 'downloads', name: 'Downloads' }
]
})
// create a grid to show the data
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
itemsSource: data
})
// create some random data
function getData() {
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
 country: countries[i],
 sales: Math.random() * 10000,
 expenses: Math.random() * 5000,
 downloads: Math.round(Math.random() * 20000),
});
}
return data;
}
}
Echarts

Echarts est une bibliothèque très utile pour la visualisation de données sur des pages Web. Grâce à Echarts, les développeurs peuvent créer des graphiques interactifs intuitifs et personnalisables qui facilitent la présentation et l'analyse des données.

Étant donné qu'Echarts est écrit en JavaScript ordinaire, Echarts n'a pas le problème de migration transparente que connaissent les autres bibliothèques de graphiques.

Dans le même temps, Echarts propose également de nombreux documents officiels que les utilisateurs peuvent consulter.

L'installation d'Echarts peut être facilement réalisée à l'aide de npm :

npm install echarts --save

Exemple de code de dessin de diagramme de dispersion Echarts :

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
text: 'Large-scale scatterplot'
},
tooltip : {
trigger: 'axis',
showDelay : 0,
axisPointer:{
 show: true,
 type : 'cross',
 lineStyle: {
 type : 'dashed',
 width : 1
 }
},
zlevel: 1
},
legend: {
data:['sin','cos']
},
toolbox: {
show : true,
feature : {
 mark : {show: true},
 dataZoom : {show: true},
 dataView : {show: true, readOnly: false},
 restore : {show: true},
 saveAsImage : {show: true}
}
},
xAxis : [
{
 type : 'value',
 scale:true
}
],
yAxis : [
{
 type : 'value',
 scale:true
}
],
series : [
{
 name:'sin',
 type:'scatter',
 large: true,
 symbolSize: 3,
 data: (function () {
 var d = [];
 var len = 10000;
 var x = 0;
 while (len--) {
  x = (Math.random() * 10).toFixed(3) - 0;
  d.push([
  x,
  //Math.random() * 10
  (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
  ]);
 }
 //console.log(d)
 return d;
 })()
},
{
 name:'cos',
 type:'scatter',
 large: true,
 symbolSize: 2,
 data: (function () {
 var d = [];
 var len = 20000;
 var x = 0;
 while (len--) {
  x = (Math.random() * 10).toFixed(3) - 0;
  d.push([
  x,
  //Math.random() * 10
  (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
  ]);
 }
 //console.log(d)
 return d;
 })()
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}

NVD3

NVD3 est une bibliothèque JavaScript basée sur D3 écrite par Mike Bostock. NVD3 permet aux utilisateurs de créer de superbes diagrammes réutilisables dans des applications Web.

NVD3 possède des fonctions graphiques très puissantes et peut facilement créer des graphiques en boîtes, des rayons de soleil, des graphiques en chandeliers, etc. Si les utilisateurs souhaitent utiliser de nombreuses fonctionnalités de la bibliothèque de graphiques JavaScript, il est recommandé d'essayer NVD3

La vitesse de la bibliothèque de graphiques NVD3 peut parfois être un problème, et elle sera plus rapide lorsqu'elle est utilisée conjointement avec l'installation de Fastdom.

Exemple de code NVD3 pour dessiner un graphique linéaire simple :

/*These lines are all chart setup. Pick and choose which chart features you want to utilize. */nv.addGraph(function() { var chart = nv.models.lineChart()  .margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.  .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!  .transitionDuration(350) //how fast do you want the lines to transition?  .showLegend(true) //Show the legend, allowing users to turn on/off line series.  .showYAxis(true) //Show the y-axis  .showXAxis(true) //Show the x-axis ; chart.xAxis //Chart x-axis settings .axisLabel(&#39;Time (ms)&#39;) .tickFormat(d3.format(&#39;,r&#39;)); chart.yAxis //Chart y-axis settings .axisLabel(&#39;Voltage (v)&#39;) .tickFormat(d3.format(&#39;.02f&#39;)); /* Done setting the chart up? Time to render it!*/ var myData = sinAndCos(); //You need data... d3.select(&#39;#chart svg&#39;) //Select the <svg> element you want to render the chart in.  .datum(myData)  //Populate the <svg> element with chart data... .call(chart);  //Finally, render the chart! //Update the chart when window resizes. nv.utils.windowResize(function() { chart.update() }); return chart;});/************************************** * Simple test data generator */function sinAndCos() { var sin = [],sin2 = [], cos = []; //Data is represented as an array of {x,y} pairs. for (var i = 0; i < 100; i++) { sin.push({x: i, y: Math.sin(i/10)}); sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5}); cos.push({x: i, y: .5 * Math.cos(i/10)}); } //Line chart data should be sent as an array of series objects. return [ { values: sin, //values - represents the array of {x,y} data points key: &#39;Sine Wave&#39;, //key - the name of the series. color: &#39;#ff7f0e&#39; //color - optional: choose your own line color. }, { values: cos, key: &#39;Cosine Wave&#39;, color: &#39;#2ca02c&#39; }, { values: sin2, key: &#39;Another sine wave&#39;, color: &#39;#7777ff&#39;, area: true //area - set to true if you want this line to turn into a filled area chart. } ];}
C3.js

Comme TauCharts, C3.js est également une bibliothèque de visualisation de graphiques très efficace basée sur D3. De plus, C3.js permet aux utilisateurs de créer des classes personnalisables avec une touche personnelle.

C3.js semble être une bibliothèque difficile, mais une fois que vous maîtrisez les compétences C3.js, vous pouvez l'utiliser facilement.

有了 C3.js 图表库，即使在第一次渲染之后，用户也可以通过创建回调来更新图表。C3.js 也允许用户为自己的 Web 应用程序创建可复用的图表，从而减少工作量。

使用 npm 安装 C3.js 图表库：

npm install c3 

C3.js 绘制组合图的代码示例：

var chart = c3.generate({ data: { columns: [  ['data1', 30, 20, 50, 40, 60, 50],  ['data2', 200, 130, 90, 240, 130, 220],  ['data3', 300, 200, 160, 400, 250, 250],  ['data4', 200, 130, 90, 240, 130, 220],  ['data5', 130, 120, 150, 140, 160, 150],  ['data6', 90, 70, 20, 50, 60, 120], ], type: 'bar', types: {  data3: 'spline',  data4: 'line',  data6: 'area', }, groups: [  ['data1','data2'] ] }});
TauCharts

TauCharts 是最灵活的 JavaScript 图表库之一。它是基于 D3 创建的，是一个以数据为中心的 JavaScript 图表库，可以改进数据可视化的效果。

TauCharts 十分灵活，访问其 API 也十分轻松。TauCharts 为用户提供了无缝映射和可视化的数据，使用 TauCharts 能够设计出十分美观的数据界面。同时，TauCharts 也和易于学习。

通过 npm 安装 TauCharts：

npm install taucharts 

TauCharts 绘制水平线的代码示例： 

var defData = [ {"team": "d", "cycleTime": 1, "effort": 1, "count": 1, "priority": "low"}, {  "team": "d",  "cycleTime": 2,  "effort": 2,  "count": 5,  "priority": "low" }, {"team": "d", "cycleTime": 3, "effort": 3, "count": 8, "priority": "medium"}, {  "team": "d",  "cycleTime": 4,  "effort": 4,  "count": 3,  "priority": "high" }, {"team": "l", "cycleTime": 2, "effort": 1, "count": 1, "priority": "low"}, {  "team": "l",  "cycleTime": 3,  "effort": 2,  "count": 5,  "priority": "low" }, {"team": "l", "cycleTime": 4, "effort": 3, "count": 8, "priority": "medium"}, {  "team": "l",  "cycleTime": 5,  "effort": 4,  "count": 3,  "priority": "high" }, {"team": "k", "cycleTime": 2, "effort": 4, "count": 1, "priority": "low"}, {  "team": "k",  "cycleTime": 3,  "effort": 5,  "count": 5,  "priority": "low" }, {"team": "k", "cycleTime": 4, "effort": 6, "count": 8, "priority": "medium"}, {  "team": "k",  "cycleTime": 5,  "effort": 8,  "count": 3,  "priority": "high" }];var chart = new tauCharts.Chart({  data: defData,  type: 'horizontalBar',    x: 'effort',  y: 'team',  color:'priority' });chart.renderTo('#bar');
Recharts

ReCharts 是一个使用 React 构建的，基于 D3 的图表库。

使用 ReCharts，用户可以在 React Web 应用程序中无缝地编写图表。

Recharts 非常轻巧，并使用 SVG 元素来创建很奇特的图表。

使用 npm 安装 Recharts：

npm install recharts 

Recharts 没有冗长的文档，它很直接。当你遇到困难时，使用 Recharts 可以很容易找到解决方案。

Recharts 创建自定义内容树图的代码示例：

const {Treemap} = Recharts;
const data = [
  {
  name: 'axis',
  children: [
  { name: 'Axes', size: 1302 },
  { name: 'Axis', size: 24593 },
  { name: 'AxisGridLine', size: 652 },
  { name: 'AxisLabel', size: 636 },
  { name: 'CartesianAxes', size: 6703 },
  ],
  },
  {
  name: 'controls',
  children: [
  { name: 'AnchorControl', size: 2138 },
  { name: 'ClickControl', size: 3824 },
  { name: 'Control', size: 1353 },
  { name: 'ControlList', size: 4665 },
  { name: 'DragControl', size: 2649 },
  { name: 'ExpandControl', size: 2832 },
  { name: 'HoverControl', size: 4896 },
  { name: 'IControl', size: 763 },
  { name: 'PanZoomControl', size: 5222 },
  { name: 'SelectionControl', size: 7862 },
  { name: 'TooltipControl', size: 8435 },
  ],
  },
  {
  name: 'data',
  children: [
  { name: 'Data', size: 20544 },
  { name: 'DataList', size: 19788 },
  { name: 'DataSprite', size: 10349 },
  { name: 'EdgeSprite', size: 3301 },
  { name: 'NodeSprite', size: 19382 },
  {
  name: 'render',
  children: [
   { name: 'ArrowType', size: 698 },
   { name: 'EdgeRenderer', size: 5569 },
   { name: 'IRenderer', size: 353 },
   { name: 'ShapeRenderer', size: 2247 },
  ],
  },
  { name: 'ScaleBinding', size: 11275 },
  { name: 'Tree', size: 7147 },
  { name: 'TreeBuilder', size: 9930 },
  ],
  },
  {
  name: 'layout',
  children: [
   { name: 'AxisLayout', size: 6725 },
   { name: 'BundledEdgeRouter', size: 3727 },
   { name: 'CircleLayout', size: 9317 },
   { name: 'CirclePackingLayout', size: 12003 },
   { name: 'DendrogramLayout', size: 4853 },
   { name: 'ForceDirectedLayout', size: 8411 },
   { name: 'IcicleTreeLayout', size: 4864 },
   { name: 'IndentedTreeLayout', size: 3174 },
   { name: 'Layout', size: 7881 },
   { name: 'NodeLinkTreeLayout', size: 12870 },
   { name: 'PieLayout', size: 2728 },
   { name: 'RadialTreeLayout', size: 12348 },
   { name: 'RandomLayout', size: 870 },
   { name: 'StackedAreaLayout', size: 9121 },
   { name: 'TreeMapLayout', size: 9191 },
  ],
  },
  { name: 'Operator', size: 2490 },
  { name: 'OperatorList', size: 5248 },
  { name: 'OperatorSequence', size: 4190 },
  { name: 'OperatorSwitch', size: 2581 },
  { name: 'SortOperator', size: 2023 },
  ],
  }
 ];
const COLORS = ['#8889DD', '#9597E4', '#8DC77B', '#A5D297', '#E2CF45', '#F8C12D'];
const CustomizedContent = React.createClass({
 render() {
 const { root, depth, x, y, width, height, index, payload, colors, rank, name } = this.props;
 return (
 <g>
 <rect
  x={x}
  y={y}
  width={width}
  height={height}
  style={{
  fill: depth < 2 ? colors[Math.floor(index / root.children.length * 6)] : &#39;none&#39;,
  stroke: &#39;#fff&#39;,
  strokeWidth: 2 / (depth + 1e-10),
  strokeOpacity: 1 / (depth + 1e-10),
  }}
 />
 {
  depth === 1 ?
  <text
  x={x + width / 2}
  y={y + height / 2 + 7}
  textAnchor="middle"
  fill="#fff"
  fontSize={14}
  >
  {name}
  </text>
  : null
 }
 {
  depth === 1 ?
  <text
  x={x + 4}
  y={y + 18}
  fill="#fff"
  fontSize={16}
  fillOpacity={0.9}
  >
  {index + 1}
  </text>
  : null
 }
 </g>
 );
 }
});
const SimpleTreemap = React.createClass({
 render () {
 return (
 <Treemap
  width={400}
 height={200}
 data={data}
 dataKey="size"
 ratio={4/3}
 stroke="#fff"
 fill="#8884d8"
 content={<CustomizedContent colors={COLORS}/>}
 />
 );
 }
})
ReactDOM.render(
 <SimpleTreemap />,
 document.getElementById(&#39;container&#39;)
);

Flot

目前，jQuery 已经成为 Web 开发人员非常重要的工具。有了 Flot.js，前端设计也变得更加容易。

Flot.js 是 JavaScript 库中较为古老的图表库之一。尽管如此，Flot.js 也不会因为绘制折线图、饼图、条形图、面积图、甚至堆叠图表而降低其性能。

Flot.js 有一个很完善的文档。当用户遇到困难时，可以很容易地找到解决办法。Flot.js 也支持旧版本的浏览器。

可以选择不使用 npm 来安装 Flot.js，而是在 HTML5 中包含 jQuery 和 JavaScript 文件。

Flot.js 的基本用法代码示例： 

$(function () {
 var d1 = [];
 for (var i = 0; i < 14; i += 0.5)
 d1.push([i, Math.sin(i)]);
 
 var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
 
 // a null signifies separate line segments
 var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
 
 $.plot($("#placeholder"), [ d1, d2, d3 ]);
});

总结

以上介绍的 JavaScript 库都是高质量的图表库。但是在学习这些库的过程中，可能会因为学习曲线陡峭或是缺乏学习资料而遇到困难，一种很好的方案是将这些库结合起来使用。最后也欢迎大家补充更多的 JavaScript 图表库。

相关推荐：

实例详解ajax实现无刷新上传文件功能

PHP中使用jQuery+Ajax实现分页查询功能

AJAX实现简单的注册页面异步请求实例代码

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!