好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

Chartkick

Chartkick 介绍

Chartkick是 一个 图表绘制工具,特点是UI美观、使用简单,并且 支持 IE6在内的大多数浏览器。之所以说它使用简单,是因为只需要一行Ruby 代码 即可绘制出漂亮的图表!

比如你需要 一个 线状图:

<%= line_chart User.group_by_day(:created_at).count %>

绘制 一个 饼状图:

<%= pie_chart Goal.group("name").count %>

柱状图:

<%= column_chart Task.group_by_day_of_week(:created_at).count %>

多重线图:

<%= line_chart @goals.map{|goal|

{:name => goal.name,:data => goal.feats.group_by_week(:created_at).count }

} %>

安装Chartkick只需要往应用中 添加 该gem:

<%= line_chart User.group_by_day(:created_at).count,:min => 1000,:max => 5000 %>接着 添加 JavaScript 文件 为视图,无需安装。如果你使用Google Charts,需要 添加 代码 :

<%= JavaScript_include_tag "//www.google.com/jsapi","chartkick" %>使用HighCharts:

<%= JavaScript_include_tag "path/to/highcharts.js","chartkick" %>

实际上,Chartkick并不依赖于Ruby/Rails。

<script src="/path/to/chartkick.js"></script>

<div id="chart-1"></div>

<script>

var chart = document.getElementById("chart-1");

new Chartkick.PieChart(chart,{"Football": 45,"Soccer": 56,"Basketball": 98});

// or remote

new Chartkick.LineChart(chart,"/charts/stocks");

</script>

网站地址 : https://chartkick.com

GitHub: https://github.com/ankane/chartkick

网站描述: 用一行Ruby 代码 创建漂亮的JavaScript图表

Chartkick官方网站

官方网站: https://chartkick.com

如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。

查看更多关于Chartkick的详细内容...

  阅读:29次

上一篇

下一篇

第1节:dc.js    第2节:Chartkick    第3节:Tabulator    第4节:ganlab    第5节:github-profile-summary    第6节:anime    第7节:JSXGraph    第8节:sigma.js    第9节:doom-fire-algorithm    第10节:britecharts    第11节:deck-of-cards    第12节:awesome-d3    第13节:js-sequence-diagrams    第14节:nivo.js    第15节:skrollr    第16节:Planetary.js    第17节:GraphicsJS    第18节:G3D    第19节:incubator-echarts    第20节:Walkway.js    第21节:react-native-chart-kit    第22节:WebCola    第23节:gka    第24节:scrollreveal    第25节:Velocity.js    第26节:ichartjs    第27节:txt.wav    第28节:Ggraph    第29节:react-animations    第30节:CamanJS    第31节:ant-motion    第32节:Blotter.js    第33节:Chart    第34节:vivus.js    第35节:Paper.js    第36节:Flotr2    第37节:Vis.js    第38节:spirit    第39节:Chart.js    第40节:JS Charts    第41节:VexChords    第42节:vue-echarts-v3    第43节:popmotion.js    第44节:smoothie    第45节:Rough.js    第46节:wx-charts    第47节:vue-echarts    第48节:JsCharts    第49节:Sparky    第50节:svgomg    第51节:moveTo    第52节:lightweight-charts    第53节:Flot    第54节:flubber    第55节:morris.js    第56节:Cubism.js    第57节:dynamics.js    第58节:Plottable.js    第59节:SandDance    第60节:tween.js    第61节:RAWGraphs    第62节:spin.js    第63节:Chartist.js    第64节:vx    第65节:mxgraph    第66节:vue-trend    第67节:Dygraphs    第68节:quickchart    第69节:Bodymovin    第70节:Turf.js    第71节:Luma.GL    第72节:js2flowchart.js    第73节:G6    第74节:Rickshaw    第75节:mo.js    第76节:g2    第77节:pts.js    第78节:trianglify    第79节:shifty    第80节:recharts    第81节:markvis    第82节:MetricsGraphics.js    第83节:billboard.js    第84节:AwesomeChartJS    第85节:El Grapho    第86节:GreenSock-JS    第87节:VisualDL    第88节:cal-heatmap    第89节:tui.chart    第90节:TensorSpace.js    第91节:AmCharts    第92节:vizceral    第93节:crossfilter    第94节:Ronin    第95节:Fusioncharts    第96节:Processing.js    第97节:tauCharts    第98节:jspaint    第99节:Snap.svg    第100节:openlayers    第101节:Highcharts.js    第102节:GoJS    第103节:rete    第104节:inmap    第105节:tikzcd-editor    第106节:Frappé Charts    第107节:easy-pie-chart    第108节:jsplumb    第109节:sprite.js    第110节:ECharts    第111节:graphql-editor    第112节:granim.js    第113节:piecon    第114节:Fabric.js    第115节:zrender.js    第116节:hamburgers    第117节:Canvasjs    第118节:ola    第119节:apexcharts.js    第120节:maker.js    第121节:Graph Dracula    第122节:plotly.js    第123节:wunderbar    第124节:gpu.js    第125节:v-charts    第126节:model-viewer    第127节:zdog    第128节:Chartify    第129节:C3.js    第130节:Aristochart    第131节:hanzi-writer    第132节:Visual Alchemist    第133节:vue-amap    第134节:p5.js    第135节:anime.js    第136节:Paths.js    第137节:vs    第138节:cesium.js    第139节:echarts-gl    第140节:Birdseye    第141节:gl-matrix    第142节:WebPlotDigitizer    第143节:GraphiQL    第144节:SVG.js    第145节:d3.js    第146节:muze    第147节:animateplus    第148节:图表秀    第149节:F2.js    第150节:mapv    第151节:Raphael.js    第152节:nvd3.js    第153节:JSTS    第154节:medium-zoom    第155节:Envision.js    第156节:flowchart.js    第157节:Two.js    第158节:sheetsee.js    第159节:deck.GL    第160节:react-spring    第161节:KUTE.js    第162节:VisuAlgo    第163节:ONNX.js    第164节:Kline    第165节:Arbor.js    第166节:cytoscape.js    第167节:SVG-Morpheus    第168节:metabase