Alguém sabe se existe uma formar de fazer gráficos em barras ou linhas usando CSS e HTML?
-
1Com o canvas, já fiz até jogo com direito a animações, personagens andando para cima e para baixo e lutando, sons e tudo mais. Gráficos de barras e linhas é moleza. Para ter uma ideia, veja isso: pt.stackoverflow.com/q/99995/132– Victor StafusaCommented 5/01/2017 às 16:54
-
1Dá para fazer com SVG também. Para ter uma ideia, veja essa pergunta que respondi há quase dois anos atrás: pt.stackoverflow.com/q/58719/132– Victor StafusaCommented 5/01/2017 às 16:55
-
1Veja esse exemplo: codepen.io/Kseso/pen/phiyL– TaisbevalleCommented 5/01/2017 às 17:07
-
1@Taisbevalle Excelente esse link. :)– Victor StafusaCommented 5/01/2017 às 17:08
Adicione um comentário
|
1 Resposta
Carlos, apesar de possível fazer do zero, você pode usar o d3js como ponto inicial para os seus gráficos.
Veja um exemplo:
var data = [
{"key":"Stream #0","values":[
{"x":0,"y":0.14090541293475303},
{"x":1,"y":0.18577189134868652},
{"x":2,"y":0.17080494531362053},
{"x":3,"y":0.11943955279666824},
{"x":4,"y":0.12973567147943157},
{"x":5,"y":0.14638145776456224},
{"x":6,"y":0.16149379899349633},
{"x":7,"y":0.13926904239580462},
{"x":8,"y":0.1834697636052203},
{"x":9,"y":0.17595684858191474},
{"x":10,"y":0.2329394353357669},
{"x":11,"y":0.5118096038931783},
{"x":12,"y":1.0604245910128074},
{"x":13,"y":1.933431270315826},
{"x":14,"y":2.6860729715445872},
{"x":15,"y":3.076926232520845},
{"x":16,"y":2.6498994752803133},
{"x":17,"y":1.8644784354019341},
{"x":18,"y":0.9666636940028317},
{"x":19,"y":0.5401218367797567},
{"x":20,"y":0.27854949515284794},
{"x":21,"y":0.16574099526914662},
{"x":22,"y":0.118347820270082},
{"x":23,"y":0.11664119595071204},
{"x":24,"y":0.19678126522080203},
{"x":25,"y":0.15486774367158815},
{"x":26,"y":0.19992047674686325},
{"x":27,"y":0.17490783895837436},
{"x":28,"y":0.15495825192553067},
{"x":29,"y":0.10433995600831547},
{"x":30,"y":0.14669215112248235},
{"x":31,"y":0.12447128914865549},
{"x":32,"y":0.1192817679403776},
{"x":33,"y":0.15624403631652425},
{"x":34,"y":0.1893867054355094},
{"x":35,"y":0.123245827602213},
{"x":36,"y":0.18922970519604806},
{"x":37,"y":0.2766569466840088},
{"x":38,"y":0.31638815979932666},
{"x":39,"y":0.6465078636019758},
{"x":40,"y":1.9040041688426101}
]},{"key":"Stream #1","values":[
{"x":0,"y":0.17426994759671852},
{"x":1,"y":0.10907499905207074},
{"x":2,"y":0.10435252778995735},
{"x":3,"y":0.12619510522351818},
{"x":4,"y":0.18649217576614804},
{"x":5,"y":0.18443306535741213},
{"x":6,"y":0.3777703694326517},
{"x":7,"y":2.0217406217331124},
{"x":8,"y":1.6460467361289448},
{"x":9,"y":0.27637711590172165},
{"x":10,"y":0.198215584506859},
{"x":11,"y":0.4004557998016823},
{"x":12,"y":1.0247250727963602},
{"x":13,"y":2.0843574501067437},
{"x":14,"y":2.905857836386078},
{"x":15,"y":2.6005647975393367},
{"x":16,"y":1.5810196661102656},
{"x":17,"y":0.6686311036976872},
{"x":18,"y":0.24740221938316848},
{"x":19,"y":0.18911969272630683},
{"x":20,"y":0.1425571773266894},
{"x":21,"y":0.11190958629159675},
{"x":22,"y":0.12860216397113625},
{"x":23,"y":0.17270310562174815},
{"x":24,"y":0.14561326892569426},
{"x":25,"y":0.15468589134148195},
{"x":26,"y":0.196300325696928},
{"x":27,"y":0.12118193006162786},
{"x":28,"y":0.1831280804553052},
{"x":29,"y":0.18270541067403961},
{"x":30,"y":0.19086790078401172},
{"x":31,"y":0.15192921704834383},
{"x":32,"y":0.14421553394637374},
{"x":33,"y":0.13390583368632358},
{"x":34,"y":0.1293233211328334},
{"x":35,"y":0.1886456357493779},
{"x":36,"y":0.13139777506605704},
{"x":37,"y":0.11170526366555747},
{"x":38,"y":0.14239031566724206},
{"x":39,"y":0.11818122725007174},
{"x":40,"y":0.12077580185646089}
]},{"key":"Stream #2","values":[
{"x":0,"y":1.471846920511301},
{"x":1,"y":2.8635730740336283},
{"x":2,"y":0.1807350063665113},
{"x":3,"y":0.1312445606782827},
{"x":4,"y":0.14595662951702215},
{"x":5,"y":0.25345667757071944},
{"x":6,"y":1.681610490109687},
{"x":7,"y":4.003584708765116},
{"x":8,"y":1.2059311924153562},
{"x":9,"y":0.9957121406657582},
{"x":10,"y":1.1137190676588569},
{"x":11,"y":1.1599930566049557},
{"x":12,"y":0.9822084432919056},
{"x":13,"y":0.7090343360228986},
{"x":14,"y":0.4667308209714948},
{"x":15,"y":0.3484988495410293},
{"x":16,"y":0.23859373234594328},
{"x":17,"y":0.1480619616245796},
{"x":18,"y":0.19800772466465164},
{"x":19,"y":0.10705030343081774},
{"x":20,"y":0.1431810013595271},
{"x":21,"y":0.18318093987617048},
{"x":22,"y":0.10239602637228065},
{"x":23,"y":0.12065693419532393},
{"x":24,"y":0.10003387292829696},
{"x":25,"y":0.15916390690992038},
{"x":26,"y":0.15227389945671005},
{"x":27,"y":0.1899390225921103},
{"x":28,"y":0.18514730614271888},
{"x":29,"y":0.16024815842184467},
{"x":30,"y":0.13480139514028672},
{"x":31,"y":0.1783542272146158},
{"x":32,"y":0.15965861459525177},
{"x":33,"y":0.1642077190994105},
{"x":34,"y":0.1657098856135402},
{"x":35,"y":0.19205326932283684},
{"x":36,"y":0.12144715851166372},
{"x":37,"y":0.13237318849423438},
{"x":38,"y":0.1762539956553613},
{"x":39,"y":0.1525422773161735},
{"x":40,"y":0.19945005704289856}
]}
];
nv.addGraph(function() {
var chart = nv.models.multiBarChart()
.transitionDuration(350)
.reduceXTicks(true)
.rotateLabels(0)
.showControls(true)
.groupSpacing(0.1);
chart.xAxis.tickFormat(d3.format(',f'));
chart.yAxis.tickFormat(d3.format(',.1f'));
d3.select('#chart1 svg').datum(data).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
//Generate some nice data.
function exampleData() {
return stream_layers(3,10+Math.random()*100,.1).map(function(data, i) {
return {
key: 'Stream #' + i,
values: data
};
});
}
<script src="http://nvd3.org/assets/lib/d3.v3.js"></script>
<script src="http://nvd3.org/assets/js/nv.d3.js"></script>
<div id="chart1">
<svg width="960" height="500"></svg>
</div>