Biblioteca de trazado de datos como Matlab-Graph. js

Vista prévia

Descripción

Graph. js es una biblioteca de JS pura que le ayuda a renderizar gráficos/gráficas como Matlab en un elemento canvas de HTML5.

Supported chart types:

• < a href = "/demo/matlab-like-data-plotting-library-graph-js/line.html" target = "_ blank" rel = "noopener" > gráfico de líneas
• < a href = "/demo/matlab-like-data-plotting-library-graph-js/points.html" target = "_ blank" rel = "noopener" > gráfico de puntos
• < a href = "/demo/matlab-like-data-plotting-library-graph-js/polar.html" target = "_ blank" rel = "noopener" > polar Graph
• < a href = "/demo/matlab-like-data-plotting-library-graph-js/bars.html" target = "_ blank" rel = "noopener" > gráfico de barras
• < a href = "/demo/matlab-like-data-plotting-library-graph-js/histogram.html" target = "_ blank" rel = "noopener" > gráfico de histograma
• < a href = "/demo/matlab-like-data-plotting-library-graph-js/response.html" target = "_ blank" rel = "noopener" > semi-log Graph
• < a href = "/demo/matlab-like-data-plotting-library-graph-js/realtime.html" target = "_ blank" rel = "noopener" > gráfico en tiempo real

Funcionamiento

En primer lugar, debe incluir la biblioteca Graph. js en la Página Web.

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

Y luego cree un contenedor DIV donde desea representar el gráfico.

<div id="graph"></div>

Trazar los datos personalizados como un gráfico de barras.

var graph = new Graph({

appendTo : "chart",

canvasWidth : 800,

canvasHeight : 800/Math.sqrt(2),

title : "Number of skipped lectures by months",

xAxisTitle : "Months",

yAxisTitle : "Skipped Lectures",

colorList : ["#00F"],

barWidth: 0.8,

barPosition: "center",

xAxisNumSteps:12,

yAxisNumSteps: 10,

yGridNumLines: 10,

drawYAxis : 1,

drawXAxis : 1
});





var y, labels;

y = [3,5,4,1,7,0,0,0,6,8,3,10];
labels = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];




graph.bars(y, labels, [0,12]);

Echa un vistazo a las demostraciones para más usos. Hay una lista completa de todas las opciones predeterminadas:

canvasWidth : 600,
canvasHeight : 600/Math.sqrt(2),
appendTo : "",
newWindow : false,
canvasId : "graph",
fontFamily : "sans-serif",
fontWeight : "normal",
fontSize : 10,

title : "",
titleFontSize : 12,
titleFontWeight: "bold",

colorList : ["#0000FF","#8B00FF","#FF0000","#FF7F00","#FFFF00","#00FF00","#00FFFF",],
colorIndex : 0,

bgColor : "#FFF",

showValues : true, // show a small div following the cursor with the values

drawTitle : true,
drawYAxis : 3, // 0: none, 1: left, 2: right, 3: both
drawYAxisNumbers : true,
drawYAxisMarks : true,
drawYAxisTitle : true,
drawXAxis : 3, // 0: none, 1: bottom, 2: top, 3: both
drawXAxisNumbers : true,
drawXAxisMarks : true,
drawXAxisTitle : true,
drawGrid : true,
drawPolarGrid : false,
drawPolarAxis : false,

lineWidth : 1,
lineShowPoints : false,

pointStroke : true,
pointFill : false,
pointRadius : 3,
pointColorIndex : 0,

barWidth : 1, // % width
barPosition : "left", // options are left, center, right. default: left.
barLabelRotate : 0, // clockwise angle in degrees, starting from horizontal position

yAxisLeftMargin : 0.101010101, // 10.1 % width (30 mm from left)
 yAxisRightMargin : 0.05050505051, // 5.05 % width (15 mm from right)
yAxisLineWidth : 1,
yAxisColor : "#000",
yAxisTextBaseline : "middle",
yAxisTextAlign : "right",
yAxisTextRotate : 0,
yAxisDatetimeFormat : "",
yAxisNumSteps : 6, // same as yGridNumLines
yAxisNumDecimals : 2,
yAxisMarkLength : 3, // Mark length in pixels
yAxisTitle : "",
yAxisScale : "lin", // options are: "lin", "log"
yAxisLogBase : 10,

xAxisTopMargin : 0.9285714286, // 92.86 % height (15 mm from bottom)
xAxisBottomMargin : 0.9285714286, // 92.86 % height (15 mm from top)
xAxisLineWidth : 1,
xAxisColor : "#000",
xAxisTextBaseline : "top",
xAxisTextAlign : "center",
xAxisTextRotate : 0,
xAxisDatetimeFormat : "",
xAxisNumSteps : 8, // same as xGridNumLines
xAxisNumDecimals : 2,
xAxisMarkLength : 3, // Mark length in pixels
xAxisTitle : "",
xAxisScale : "lin", // options are: "lin", "log"
xAxisLogBase : 10,

yGridNumLines : 6,
yGridLineLength : 1,
yGridSpaceLength : 4,
yGridLineColor : "#999",

xGridNumLines : 8,
xGridLineLength : 1,
xGridSpaceLength : 4,
xGridLineColor : "#999",

polarGridNumLines : 24, // Number of lines (360 deg / 15 deg = 24)
polarGridLineLength : 1,
polarGridSpaceLength : 4,
polarGridColor : "#999",
polarAxisColor : "#222",
polarAxisMargin : 0.75, // Margin to the closest axis
polarAxisNumFormat : "deg" // options are: "deg" for degree, "rad" for radian