Generar graficos canvas con js
buenas a todos
en esta oportunidad les presento como hacer graficos con Chart.js
Ejemplo
Código
Espero que sea de ayuda :)
en esta oportunidad les presento como hacer graficos con Chart.js
Ejemplo
Código
<script src="../../js/jquery.js"></script> <script type="text/javascript" src="http://www.chartjs.org/assets/Chart.js"></script> <style type="text/css"> #chartjs-tooltip { opacity: 0; position: absolute; background: rgba(0, 0, 0, .7); color: white; padding: 3px; border-radius: 3px; -webkit-transition: all .1s ease; transition: all .1s ease; pointer-events: none; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } </style> <canvas id="migrafico" width="400" height="200"></canvas> <div id="chartjs-tooltip"></div> <script type='text/javascript'>//<![CDATA[ var ctx = $("#migrafico").get(0).getContext("2d"); var data = { labels: ["enero", "febrero", "marzo", "abril", "Mayo", "junio", "julio"], datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [65, 59, 80, 81, 56, 55, 40] }] }; var myLineChart = new Chart(ctx).Line(data, { customTooltips: function (tooltip) { var tooltipEl = $('#chartjs-tooltip'); if (!tooltip) { tooltipEl.css({ opacity: 0 }); return; } tooltipEl.removeClass('above below'); tooltipEl.addClass(tooltip.yAlign); // split out the label and value and make your own tooltip here var parts = tooltip.text.split(":"); var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>'; tooltipEl.html(innerHtml); tooltipEl.css({ opacity: 1, left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px', top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px', fontFamily: tooltip.fontFamily, fontSize: tooltip.fontSize, fontStyle: tooltip.fontStyle, }); } }); //]]> </script> </body> </html>
Espero que sea de ayuda :)
2
Puntos
Puntos
1621
Visitas
Visitas
0
Resp
Resp
Por pablo hace 92 meses
Experto