`
jsntghf
  • 浏览: 2543835 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

css_graphs的使用

阅读更多

到项目目录执行以下命令进行安装:

 

ruby ./script/plugin install http://topfunky.net/svn/plugins/css_graphs

 

然后,执行以下命令将图片拷贝到images目录下:

 

ruby ./script/generate css_graphs

 

使用示例:

 

<%= bar_graph [["Stout", 60], ["IPA", 80], ["Pale", 50], ["Milkshake", 30]] %>
<%= horizontal_bar_graph [["Stout", 10], ["IPA", 80], ["Pale Ale", 50], ["Milkshake", 30]] %>
<%= complex_bar_graph [["Stout", 10], ["IPA", 80], ["Pale Ale", 50], ["Milkshake", 30]] %>

 

效果图如下:

 

 

分享到:
评论

相关推荐

    sar_graphs_renderer

    "sar_graphs_renderer"是一个与数据可视化相关的项目,主要用于在Jupyter Notebook环境中渲染系统活动报告(System Activity Reports,简称SAR)的图形。SAR是Linux系统中的一个实用工具,用于收集、报告和保存系统...

    garden_graphs

    总的来说,"garden_graphs"项目展示了如何使用HTML这一基础的网页技术,结合数据可视化的方法,将学术研究转化为引人入胜的互动体验。这不仅提升了研究成果的传播效果,也为学习者提供了一个直观理解复杂数据结构的...

    整套完整版纯DIV+CSS网站模版

    【整套完整版纯DIV+CSS网站模版】是一套基于HTML5和CSS3构建的网页设计资源,它强调了使用纯CSS布局而非传统的表格布局,以实现更灵活、响应式的设计。这套模板包含了多种页面元素和交互效果,旨在提供一个全面的...

    graphs:图形类型的小部件库

    使用CDN https://cdn.jsdelivr.net/gh/bitquery/graphs@1/dist/graphs.min.js https://cdn.jsdelivr.net/gh/bitquery/graphs@1/dist/graphs.min.css 克隆仓库: git clone https://github.com/bitquery/graphs.git...

    chinaMap中国地图基于HTML5,JavaScript,css实现

    D3.js is a JavaScript library for ...D3.js provides powerful data visualization capabilities, including but not limited to bar charts, line charts, pie charts, scatter plots, and force-directed graphs.

    PowerUI - HTML/CSS Unity

    - Focus graphs. - Emoji supported. - Cameras of any shape (e.g round minimaps) right in your HTML. - Vast HTML tag and CSS property support. - Incredibly extendible. Custom file protocols (e.g. ...

    marker-graphs:使用标记 JSON 数据格式绘制图形的可扩展库

    "marker-graphs" 是一个库,它专注于使用标记(marker)JSON 数据格式来绘制图形。"可扩展库"表明该库设计灵活,可以适应多种需求,允许用户根据自己的需求进行定制和扩展。 **描述详解:** 描述中提到的 "标记图...

    example-graphs:使用d3js的示例图

    "example-graphs:使用d3js的示例图" 这个标题揭示了我们关注的主题是关于使用d3.js创建图表的实例。d3.js(Data-Driven Documents)是一个强大的JavaScript库,它允许开发人员在Web浏览器中进行数据可视化。这个项目...

    graphs:d3.js图的一些示例

    你可以逐个研究每个示例的HTML、CSS和JavaScript代码,了解它们如何构造图形、绑定数据以及处理用户交互。 通过学习和实践这些d3.js示例,你将能够熟练掌握数据可视化的技巧,为网页应用添加生动、直观的图表。d3....

    canvas-graphs

    对于更高级的使用,如响应式设计或动画效果,你可能还需要学习CSS3和JavaScript的定时器函数。 总之,canvas-graphs是一个便捷的工具,为开发者提供了在HTML5 Canvas上绘制自定义图表的能力,特别是对于那些希望...

    Testing-the-SSH-Key-with-Graphs:使用GGplot

    标题"Testing-the-SSH-Key-with-Graphs:使用GGplot"暗示我们将使用一种名为GGplot的图形库来测试SSH密钥。GGplot是R语言中最流行的数据可视化工具之一,它基于统计图形理论,能够创建美观且具有洞察力的图表。在这个...

    js生成图表

    3. **自定义样式**:"CSS Graphs③"可能强调了使用CSS来定制图表的外观。CSS允许开发者精细控制颜色、边框、阴影等视觉元素,以适应不同的设计需求。 4. **数据绑定**:JS图表库通常允许开发者从JSON或其他数据源...

    graphs

    D3.js是一个强大的库,它允许开发者绑定任意数据到DOM(文档对象模型),并使用数据驱动的方法来更新视觉元素。D3.js提供了丰富的功能,包括数据绑定、数据转换、布局算法等,可以实现各种复杂的可视化效果。 另外...

    n64graphs

    6. **响应式设计**:考虑到项目可能在不同设备上展示,开发者需要确保n64graphs能适应不同的屏幕尺寸,这需要对CSS媒体查询和布局管理有深入理解。 7. **性能优化**:处理大量数据时,JavaScript性能是个关键问题。...

    CSS教程:复合型条状图表

    英文原文:CSS FOR BAR GRAPHS翻译整理:西米CC-www.ximicc.com 这是一种相对比较复杂的图表,但是仍然遵循上篇中提出的最基本的思路。本例中使用的定义列表标签dl可能平常我们见得不多,一般我们在做列表的时候...

    CSS教程:最基本的条状图表

    英文原文:CSS FOR BAR GRAPHS翻译整理:西米CC-www.ximicc.com 译文已作精简,保留了与主题切实相关的部分,并对文中整段给出的代码进行分解注释,便于大家的阅读和理解。要查看英语原文请参看原文地址,关于本例的...

    Html实现统计

    对于“css-line-graphs.html”这个文件名,我们可以推测这是一个使用纯CSS实现的折线图示例。CSS是用于定义网页外观和布局的样式语言,它允许我们精确控制颜色、字体、布局以及动画效果。在统计图表中,CSS可以用来...

    Program-Review-Graphs:铜山学院的课程评论图

    在"Program-Review-Graphs-main"这个文件夹中,很可能包含了项目的源代码,如HTML文件(`.html`)、CSS文件(`.css`)和JavaScript文件(`.js`)。HTML文件负责搭建页面结构,CSS文件则负责样式设计,而JavaScript...

    Graphs-in-React-Native

    5. **样式和布局**:React Native使用样式对象进行样式定义,类似于CSS但更为灵活。Flexbox布局模型用于控制组件的排列和对齐,对于创建响应式的图形界面非常有用。 6. **模块化和组件化**:遵循React的最佳实践,...

    Graphs

    然而,通过结合CSS(层叠样式表)和JavaScript(JS),我们可以创建动态且交互式的图形。 3. **HTML5的Canvas元素** HTML5引入了`&lt;canvas&gt;`元素,提供了一个画布,开发者可以使用JavaScript来绘制图形。这为动态...

Global site tag (gtag.js) - Google Analytics