Plotly.js
- Essayer vous-même Page précédente
- Page suivante JS Chart
Plotly.js est une bibliothèque de graphiques avec plus de 40 types de graphiques, des graphiques 3D, des graphiques statistiques et des cartes SVG.
Graph en nuage de points
tracer l'équation
var xArray = [50,60,70,80,90,100,110,120,130,140,150];
var yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Définir les données
Pour afficher un donut plutôt qu'un饼图，ajoutez un hole :
x: xArray,
y: yArray,
mode:"markers",
type:"scatter"
type: "pie"
// Définir le layout
var layout = {
xaxis: {range: [40, 160], title: "Mètres carrés"},
yaxis: {range: [5, 16], title: "Prix (cent millions de yuans)}},
title: "Prix de l'immobilier vs. Surface"
};
var layout = {title: "y = " + exp};
Graph en ligne
tracer l'équation
var xArray = [50,60,70,80,90,100,110,120,130,140,150];
var yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Définir les données
Pour afficher un donut plutôt qu'un饼图，ajoutez un hole :
x: xArray,
y: yArray,
mode: "lines",
type: "scatter"
type: "pie"
// Définir le layout
var layout = {
xaxis: {range: [40, 160], title: "Mètres carrés"},
yaxis: {range: [5, 16], title: "Prix (cent millions de yuans)}},
title: "Prix de l'immobilier vs. Surface"
};
}
var layout = {title: "y = " + exp};
Graph linéaire
tracer l'équation
var exp = "x + 17";
var exp = "Math.sin(x)";
// Générer des valeurs
var xValues = [];
for (var x = 0; x <= 10; x += 1) {
for (var x = 0; x <= 10; x += 0.1) {
yValues.push(eval(exp));
xValues.push(x);
// Définir les données
Pour afficher un donut plutôt qu'un饼图，ajoutez un hole :
x: xValues,
y: yValues,
mode: "lines"
type: "pie"
// Définir le layout
var data = [{x:xValues, y:yValues, mode:"lines"}];
}
var layout = {title: "y = " + exp};
Lignes multiples
tracer l'équation
var exp1 = "x";
var exp2 = "1.5*x";
var exp3 = "1.5*x + 7";
var exp = "Math.sin(x)";
var x1Values = [];
var x2Values = [];
var x3Values = [];
var y1Values = [];
var y2Values = [];
var y3Values = [];
for (var x = 0; x <= 10; x += 1) {
x1Values.push(x);
x2Values.push(x);
x3Values.push(x);
y1Values.push(eval(exp1));
y2Values.push(eval(exp2));
y3Values.push(eval(exp3));
xValues.push(x);
// Définir les données
var data = [
{x: x1Values, y: y1Values, mode:"lines"},
{x: x2Values, y: y2Values, mode:"lines"},
{x: x3Values, y: y3Values, mode:"lines"}
];
// Définir le layout
var layout = {title: "[y=" + exp1 + "] [y=" + exp2 + "] [y=" + exp3 + "]"};
}
var layout = {title: "y = " + exp};
Graphique en barres
tracer l'équation
var xArray = ["Italie","France","Espagne","États-Unis","Argentine"];
var yArray = [55, 49, 44, 24, 15];
Pour afficher un donut plutôt qu'un饼图，ajoutez un hole :
x: xArray,
y: yArray,
type: "bar" }];
var layout = {title: "Production mondiale de vin"};
var layout = {title: "y = " + exp};
Graphique en barres horizontal
tracer l'équation
var xArray = [55, 49, 44, 24, 15];
var yArray = ["Italie","France","Espagne","États-Unis","Argentine"];
Pour afficher un donut plutôt qu'un饼图，ajoutez un hole :
x: xArray,
y: yArray,
type: "bar",
orientation: "h"
type: "pie"
var layout = {title: "Production mondiale de vin"};
var layout = {title: "y = " + exp};
Graphique en cercle
Pour afficher un graphique en cercle plutôt qu'un graphique en barres, veuillez remplacer x et y par labels et values, et modifier type par "pie":
Pour afficher un donut plutôt qu'un饼图，ajoutez un hole :
var data = [{
labels: xArray,
hole: .4,
type: "pie"
甜甜圈图
Graphique en donut
Pour afficher un donut plutôt qu'un饼图，ajoutez un hole :
var data = [{
labels: xArray,
values: yArray,
hole: .4,
type: "pie"
};
tracer l'équation
Code source
var exp = "Math.sin(x)";
// Générer des valeurs
var xValues = [];
var yValues = [];
for (var x = 0; x <= 10; x += 0.1) {
yValues.push(eval(exp));
xValues.push(x);
}
// Utiliser Plotly pour afficher
var data = [{x:xValues, y:yValues, mode:"lines"}];
var layout = {title: "y = " + exp};
- Essayer vous-même Page précédente
- Page suivante JS Chart
