Plotly.js


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Plotly.js ist eine Diagrammbibliothek mit über 40 Diagrammtypen:

  • Horizontale und vertikale Balkendiagramme

  • Kreis- und Donut-Diagramme

  • Liniendiagramme

  • Streu- und Blasendiagramme

  • Gleichungsdiagramme

  • 3D-Diagramme

  • Statistische Grafiken

  • SVG-Karten

  • ...

Plotly.js ist kostenlos und Open Source unter der MIT-Lizenz. Die Installation und Nutzung kostet nichts. Sie können die Quelle anzeigen, Probleme melden und über Github Beiträge leisten.

Balkendiagramme

Quellcode

const xArray = ["Italy","France","Spain","USA","Argentina"];
const yArray = [55, 49, 44, 24, 15];

const data = [{
  x: xArray,
  y: yArray,
  type: "bar",
  orientation:"v",
  marker: {color:"rgba(0,0,255)"}
}];

const layout = {title:"World Wide Wine Production"};

Plotly.newPlot("myPlot", data, layout);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>

<div id="myPlot" style="width:100%;max-width:700px"></div>

<script>
const xArray = ["Italy", "France", "Spain", "USA", "Argentina"];
const yArray = [55, 49, 44, 24, 15];

const data = [{
  x:xArray,
  y:yArray,
  type:"bar",
  orientation:"v",
  marker: {color:"rgba(0,0,255,0.6)"}
}];

const layout = {title:"World Wide Wine Production"};

Plotly.newPlot("myPlot", data, layout);
</script>

</body>
</html>

Horizontale Balkendiagramme

Quellcode

const xArray = [55, 49, 44, 24, 15];
const yArray = ["Italy","France","Spain","USA","Argentina"];

const data = [{
  x: xArray,
  y: yArray,
  type: "bar",
  orientation: "h",
  marker: {color:"rgba(255,0,0,0.6)"}

}];

const layout = {title:"World Wide Wine Production"};

Plotly.newPlot("myPlot", data, layout);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>

<div id="myPlot" style="width:100%;max-width:700px"></div>

<script>
const xArray = [55, 49, 44, 24, 15];
const yArray = ["Italy ", "France ", "Spain ", "USA ", "Argentina "];

const data = [{
  x:xArray,
  y:yArray,
  type:"bar",
  orientation:"h",
  marker: {color:"rgba(255,0,0,0.6)"}
}];

const layout = {title:"World Wide Wine Production"};

Plotly.newPlot("myPlot", data, layout);
</script>

</body>
</html>

Kreisdiagramme

Um einen Kreis anstelle von Balken anzuzeigen, ändern Sie x und y in Beschriftungen und Werte und ändern Sie den Typ in „Kuchen“:

const data = [{
  labels: xArray,
  values: yArray,
  type: "pie"
}];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>

<div id="myPlot" style="width:100%;max-width:700px"></div>

<script>
const xArray = ["Italy", "France", "Spain", "USA", "Argentina"];
const yArray = [55, 49, 44, 24, 15];

const layout = {title:"World Wide Wine Production"};

const data = [{labels:xArray, values:yArray, type:"pie"}];

Plotly.newPlot("myPlot", data, layout);
</script>

</body>
</html>

Donut-Diagramme

Um einen Donut anstelle eines Kuchens anzuzeigen, fügen Sie ein Loch hinzu:

const data = [{
  labels: xArray,
  values: yArray,
  hole: .4,
  type: "pie"
}];

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>

<div id="myPlot" style="width:100%;max-width:700px"></div>

<script>
const xArray = ["Italy", "France", "Spain", "USA", "Argentina"];
const yArray = [55, 49, 44, 24, 15];

const layout = {title:"World Wide Wine Production"};

const data = [{labels:xArray, values:yArray, hole:.4, type:"pie"}];

Plotly.newPlot("myPlot", data, layout);
</script>

</body>
</html>

Gleichungen zeichnen

Quellcode

let exp = "Math.sin(x)";

// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 0.1) {
  xValues.push(x);
  yValues.push(eval(exp));
}

// Display using Plotly
const data = [{x:xValues, y:yValues, mode:"lines"}];
const layout = {title: "y = " + exp};
Plotly.newPlot("myPlot", data, layout);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>

<script>
let exp = "Math.sin(x)";

// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 0.1) {
  xValues.push(x);
  yValues.push(eval(exp));
}

// Display using Plotly
const data = [{x:xValues, y:yValues, mode:"lines"}];
const layout = {title: "y = " + exp};
Plotly.newPlot("myPlot", data, layout);
</script>

</body>
</html>

Um stattdessen Streuungen anzuzeigen, ändern Sie den Modus auf Markierungen:

// Display using Plotly
const data = [{x:xValues, y:yValues, mode:"markers"}];
const layout = {title: "y = " + exp};
Plotly.newPlot("myPlot", data, layout);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>

<script>
let exp = "Math.cos(x)";

// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 0.2) {
  xValues.push(x);
  yValues.push(eval(exp));
}

// Display using Plotly
const data = [{x:xValues, y:yValues, mode:"markers"}];
const layout = {title: "y = " + exp};
Plotly.newPlot("myPlot", data, layout);
</script>


Streudiagramme

Quellcode

const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];

// Define Data
const data = [{
  x: xArray,
  y: yArray,
  mode:"markers",
  type:"scatter"
}];

// Define Layout
const layout = {
  xaxis: {range: [40, 160], title: "Square Meters"},
  yaxis: {range: [5, 16], title: "Price in Millions"},
  title: "House Prices vs. Size"
};

Plotly.newPlot("myPlot", data, layout);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>

<div id="myPlot" style="width:100%;max-width:700px"></div>

<script>
const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];

// Define Data
const data = [{
  x:xArray,
  y:yArray,
  mode:"markers"
}];

// Define Layout
const layout = {
  xaxis: {range: [40, 160], title: "Square Meters"},
  yaxis: {range: [5, 16], title: "Price in Millions"},  
  title: "House Prices vs. Size"
};

// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
</script>

</body>
</html>

Liniendiagramme

Quellcode

const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];

// Define Data
const data = [{
  x: xArray,
  y: yArray,
  mode: "lines",
  type: "scatter"
}];

// Define Layout
const layout = {
  xaxis: {range: [40, 160], title: "Square Meters"},
  yaxis: {range: [5, 16], title: "Price in Millions"},
  title: "House Prices vs Size"
};

// Display using Plotly
Plotly.newPlot("myPlot", data, layout);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>

<div id="myPlot" style="width:100%;max-width:700px"></div>

<script>
const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];

// Define Data
const data = [{
  x: xArray,
  y: yArray,
  mode:"lines"
}];

// Define Layout
const layout = {
  xaxis: {range: [40, 160], title: "Square Meters"},
  yaxis: {range: [5, 16], title: "Price in Millions"},  
  title: "House Prices vs. Size"
};

// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
</script>

</body>
</html>


Blasendiagramme

Blasendiagramme sind Streudiagramme, deren Markierungen unterschiedliche Farben, Größen und Symbole haben.

Es handelt sich um eine Art dreidimensionales Diagramm mit nur zwei Achsen (x und y), auf denen die Größe der Blase angegeben ist kommuniziert die dritte Dimension.

Quellcode

const xArray = [1,2,3,4];
const yArray = [10,20,30,40];

const trace1 = {
  x: xArray,
  y: yArray,
  mode: 'markers',
  marker: {
    color: ['red', 'green',  'blue', 'orange'],
    size: [20, 30, 40, 50]
  }
};

const data = [trace1];

const layout = {
  title: "Plotting Bubbles"
};

Plotly.newPlot('myPlot', data, layout);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>

<div id="myPlot" style="width:100%;max-width:700px"></div>

<script>
const xArray = [1,2,3,4];
const yArray = [10,20,30,40];

const trace1 = {
  x: xArray,
  y: yArray,
  mode: 'markers',
  marker: {
    color: ['red', 'green',  'blue', 'orange'],
    size: [20, 30, 40, 50]
  }
};

const trace2 = {
  x: [1, 2, 3, 4],
  y: [15, 30, 45, 60],
  mode: 'markers',
  marker: {
    color: 'rgb(31, 119, 180)',
    size: 18,
    symbol: ['circle', 'square', 'diamond', 'cross']
  },
};

const data = [trace1, trace2];

const layout = {
  title: "Plotting Bubbles"
};

Plotly.newPlot('myPlot', data, layout);
</script>

</body>
</html>

Lineare Diagramme

Quellcode

let exp = "x + 17";

// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 1) {
  yValues.push(eval(exp));
  xValues.push(x);
}

// Define Data
const data = [{
  x: xValues,
  y: yValues,
  mode: "lines"
}];

// Define Layout
const layout = {title: "y = " + exp};

// Display using Plotly
Plotly.newPlot("myPlot", data, layout);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>

<script>
let exp = "x + 17";

// Generate values
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 1) {
  xValues.push(x);
  yValues.push(eval(exp));
}

// Define Data
const data = [{
  x: xValues,
  y: yValues,
  mode:"lines"
}];

// Define Layout
const layout = {title: "y = " + exp};

// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
</script>

</body>
</html>

Mehrere Zeilen

Quellcode

let exp1 = "x";
let exp2 = "1.5*x";
let exp3 = "1.5*x + 7";

// Generate values
const x1Values = [];
const x2Values = [];
const x3Values = [];
const y1Values = [];
const y2Values = [];
const y3Values = [];

for (let 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));
}

// Define Data
const data = [
  {x: x1Values, y: y1Values, mode:"lines"},
  {x: x2Values, y: y2Values, mode:"lines"},
  {x: x3Values, y: y3Values, mode:"lines"}
];

// Define Layout
const layout = {title: "[y=" + exp1 + "]  [y=" + exp2 + "]  [y=" + exp3 + "]"};

// Display using Plotly
Plotly.newPlot("myPlot", data, layout);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<body>
<div id="myPlot" style="width:100%;max-width:700px"></div>

<script>
let exp1 = "x";
let exp2 = "1.5*x";
let exp3 = "1.5*x + 7";

// Generate values
const x1Values = [];
const x2Values = [];
const x3Values = [];
const y1Values = [];
const y2Values = [];
const y3Values = [];

for (let 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));
}

// Define Data
const data = [
  {x: x1Values, y: y1Values, mode:"lines"},
  {x: x2Values, y: y2Values, mode:"lines"},
  {x: x3Values, y: y3Values, mode:"lines"}
];

//Define Layout
const layout = {title: "[y=" + exp1 + "]  [y=" + exp2 + "]  [y=" + exp3 + "]"};

// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
</script>

</body>
</html>