Gráfico SVG dinámico & biblioteca de gráficos-RKGraphs. js

Vista prévia

Descripción

RKGraphs. js es una biblioteca de JavaScript que se utiliza para generar gráficos dinámicos, personalizables, basados en SVG y gráficos en la Página Web.

Charts and graphs supported:

• Gráfico de líneas
• Curve Graph
• Gráfico circular
• Gráfico de polígono
• Gráfico de barras
• Múltiples gráficos
• Gráfico de puntos
• Gráfico de polilínea
• Custom Graph
• Más …

Funcionamiento

Descargue e inserte la biblioteca principal de JavaScript ' RKGraphs. js ' en la Página Web.

<script src="RKGraphs.js"></script>

Cree un gráfico de puntos con las configuraciones dadas.

myGraph = RKGraph.PointGraphGraph({

width: window.innerWidth,

height: window.innerHeight,

radius: 5;

color: "blue",

className: "",

doDup: false,

dupClass: "",

averageLineColor: "red",
});

Cree un gráfico de barras con las configuraciones dadas.

myGraph = RKGraph.BarGraph({

width: window.innerWidth,

height: window.innerHeight,

color: "blue",

direction: "left-right",

stroke: false,

barspacing: 20,

className: "",

doDup: false,

dupClass: "",

averageLineColor: "red",

show2DVertices: true,
});

Cree un gráfico de líneas con las configuraciones dadas.

myGraph = RKGraph.LineGraph({

width: window.innerWidth,

height: window.innerHeight,

strokewidth: 5,

color: "blue",

className: "",

doDup: false,

dupClass: "",

averageLineColor: "red",

show2DVertices: true,
});

Cree un gráfico de polilínea con las configuraciones dadas.

myGraph = RKGraph.PolylineGraph({

width: window.innerWidth,

height: window.innerHeight,

gradient: null,

color: "blue",

direction: "left-right",

stroke: false,

strokewidth: 5,

className: "",

doDup: false,

dupClass: "",

averageLineColor: "red",

show2DVertices: true,
});

Cree un gráfico de polígono con las configuraciones dadas.

myGraph = RKGraph.PolygonGraph({

width: window.innerWidth,

height: window.innerHeight,

gradient: null,

color: "blue",

direction: "left-right",

stroke: false,

className: "",

doDup: false,

dupClass: "",

averageLineColor: "red",

show2DVertices = true,
});

Cree un gráfico circular con las configuraciones dadas.

myGraph = RKGraph.PieGraph({

width: window.innerWidth,

height: window.innerHeight,

color: "blue",

stroke: false,

className: "",

doDup: false,

dupClass: "",

fixedcolumns: false,

columns: [],

show2DVertices: true
});

Cree un gráfico de curva con las configuraciones dadas.

myGraph = RKGraph.CurveGraph({

width: window.innerWidth,

height: window.innerHeight,

gradient: null,

color: "blue",

direction: "left-right",

stroke: false,

strokewidth: 5,

className: "",

doDup: false,

dupClass: "",

averageLineColor: "red",

show2DVertices = true,
});