标签: sparklines
jQuery Sparklines和Twitter Bootstrap 3 - 工具提示样式覆盖？
这就是:我试图在Twitter Bootstrap 3中使用jQuery Sparklines.在这个过程中,Sparklines的工具提示松散了样式,显然Bootstrap css覆盖了Sparklines JS中的某些内容.
据我所知,它与tooltip选择器有关.
这是它应该如何看的一个例子.这没有 Bootstrap css.指向不同的迷你图,并看到一个漂亮的工具提示值悬停: JSfiddle,它应该如何看待
不幸的是,当我添加Bootstrap css时,会发生什么: JSfiddle,它与Bootstrap css的外观如何.
我确信这很简单,但由于Sparklines的默认css被硬编码到js中,我出海了.
任何指针都将非常感激.
推荐指数
解决办法
查看次数
将字符串标记添加到jQuery Sparklines插件的每个值
我正在为我正在开发的Web应用程序实现jQuery Sparklines插件.我想在饼图值上添加标签,因此当您将鼠标悬停在特定图表上时,您将显示" Automotive(25%)"而不是默认的int值" 1(25%)".
关于如何做到这一点的任何想法？
这是我的代码:
$(function(){
var myvalues = [10,8,5,7,4,4,1];
$('#sparkline').sparkline(myvalues, {
type: 'pie',
width: '200px',
height: '200px',
sliceColors: ['#5d3092', '#4dc9ec', '#9de49d', '#9074b1', '#66aa00', '#dd4477', '#0099c6', '#990099'],
borderWidth: 7,
borderColor: '#f5f5f5'
});
});
谢谢!
推荐指数
解决办法
查看次数
R YaleToolkit:如何更改迷你图上刻度标签的字体大小？
我正在使用这个函数来快速轻松地sparklines使用R但是我似乎无法弄清楚如何更改字体大小以避免y轴刻度标签的丑陋重叠.这是我的代码(请参阅下面的可重现示例):
sparklines(gamma.df, sub=c(1:23),outer.margin = unit(c(2, 2, 2, 2), "cm"))
以及由此产生的情节:
我似乎能够完全抑制y轴
sparklines(gamma.df, sub=c(1:23),yaxis=FALSE,outer.margin = unit(c(2, 2, 2, 2), "cm"))
但我真正想要的只是缩小刻度线上的数字(并在线下添加灰色填充,但看起来我必须在屏幕上绘制多边形,这可能足以让一个单独的问题麻烦...和一个不同的包).
该文件表明,gpar可能是相关的:"在需要的图形参数列表中的所有情况下,有效的参数名称是通过在适当的调用gpar当作为将是有效的一样." 但是我需要一些帮助来理解这一点,因为我的尝试似乎都没有到达任何地方(同样适用于cex.axis和axis()).有关R的grid图形专家吗？还提供了一个记录良好的完全不同的方法(ggplot2？)的链接,它提供了更好的质量火花线式输出.
这是一些复制我的问题的示例数据和代码:
x <- data.frame(V = rnorm(1000), W = rnorm(1000), X = rnorm(1000), Y = rnorm(1000), Z = rnorm(10))
sparklines(x,outer.margin = unit(c(2, 2, 2, 2), "cm"))
这里是最终的示例数据图,在y轴刻度线上有重叠的数字:
更新:使用来自@ geek-on-acid 的非常有用的plot代码和来自Tufte论坛的一些代码(见下文)我想出了一个替代的迷你方法,它不使用YaleToolkit包,看起来没问题......这是一个可重复的例子(实际上只有两行,但在这里注释为我的教育):
x <- data.frame(V = rnorm(1000), W = rnorm(1000), X = rnorm(1000), Y = rnorm(1000), …推荐指数
解决办法
查看次数
将迷你图表添加到表格中
我试图将我的所有数据运算转移到Rmarkdown而不是SPSS + Excel,但无法弄清楚如何创建带有附加图的表.
在Excel中,这可以使用迷你图功能完成,或者像我一样,只需创建一个图表并非常准确地放置它.
上表是使用Tables包(和Pander)中的表格函数创建的.并粘贴到Excel中以创建图形(以及图形的标题).
library(tables)
library(pander)
pander( #convert table to rmarkdown table
tabular(
(Species + 1) ~ (n=1) + Format(digits=2) *
(Sepal.Length + Sepal.Width) * (mean + sd),
data = iris),
caption = "Table 1. Iris") #Heading for table
有没有人创造过这样的东西？也许使用gridExtra包解决方法,虽然我怀疑包可以匹配表和图.
编辑 - 迄今为止的解决方案.
HTML已完成.在那里用pdf中途.对于doc,我认为不可能(复制粘贴到Excel).
HTML表
首先,所以R知道我是否正在渲染html,pdf或doc.out_type取值:"html","pdf"和"docx".我可以在if语句中使用这个对象.
out_type <- knitr::opts_knit$get("rmarkdown.pandoc.to")
现在吧:
if(out_type == "html"){ #if output is html then:
my_table$Mean_Sepal_Length <- paste0( #I have a table saved as a dataframe. I add a column to it called Mean_Sepal_Length
"<span style=' …推荐指数
解决办法
查看次数
正确渲染数据表中的迷你图
在我下面发布的示例中,我试图将jquery.sparkline库中的迷你图呈现为jquery.dataTables表中的数据列.加载下面的示例工作得很好但仅适用于第一页.如果我单击"下一步"而不是将数据渲染为迷你图,则只需渲染数字.如果我单击"上一个",则会显示初始设置的迷你图.如果我排序,我会得到两者的组合.
我是这两个图书馆的新手,我试图在这个论坛以及其他人寻找解决方案,到目前为止,我的研究结果都没有解决我的问题.谁知道我做错了什么？
谢谢你的任何建议!
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" title="currentStyle">
@import "http://datatables.net/release-datatables/media/css/demo_page.css";
@import "http://datatables.net/release-datatables/media/css/jquery.dataTables.css";
td.right {
text-align: right;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script type="text/javascript" src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#dynamic').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
$('#example').dataTable({
"aaSorting": [],
"aaData": [
["0,1,2,3,4"],
["4,3,2,1,0"],
["0,1,2,3,4"],
["4,3,2,1,0"],
["0,1,2,3,4"],
["4,3,2,1,0"],
["0,1,2,3,4"],
["4,3,2,1,0"],
["0,1,2,3,4"],
["4,3,2,1,0"],
["0,1,2,3,4"],
["4,3,2,1,0"]
],
"aoColumns": [
{ "sTitle": "Sparkline", "sClass": "center" }
],
"aoColumnDefs": [
{
"aTargets": [0],
"mRender": function (data, type, full) {
return …推荐指数
解决办法
查看次数
将 Sparkline htmlwidget 包含在 Shiny 应用程序的数据表单元格中，而无需诉诸（太多）JavaScript
我正在使用该sparkline包生成条形图，并将其放入datatableShiny 应用程序中的单元格中。我已经设法在独立中产生所需的输出datatable，但是当我将其放入 Shiny 应用程序中时，它不起作用。spk_add_deps()这可能与如何识别 htmlwidgets有关。我尝试过spk_add_deps()多次移动该函数并向其传递各种标识符，但没有任何效果。
我确实在这里发现了本质上相同的问题Render datatable with Sparklines in Shiny
但给定的解决方案 (1) 依赖于在回调函数中为迷你图编写 JavaScript 代码（违背了使用 R 函数的目的sparkline()）和 (2) 似乎如果迷你图在查看器中呈现，那么我们离让它们在 Shiny 应用程序中呈现而无需编写所有 JavaScript 就不远了。
这是演示：
# Preliminary, load packages and build a demo table with the sparkline code merged in
library(shiny)
library(DT)
library(data.table)
library(sparkline)
## Create demo data sets
my_mtcars <- data.table(mtcars, keep.rownames = TRUE)
names(my_mtcars)[1] <- 'car_id'
set.seed(0)
data_for_sparklines <- data.table(car_id = rep(my_mtcars$car_id, 5),
category = …推荐指数
解决办法
查看次数
在迷你图条形图上添加图例和y轴值
我正在制作迷你图条形图.到现在为止我能够绘制一个简单的条形图,这里是Jquery代码:
values = [0,8, 15, 10, 50, 25, 35, 70];
$('.sparkline').sparkline(values, {
type: 'bar',
height: '200px',
barWidth: 20,
barSpacing: 10,
barColor: '#56aaff',
zeroColor: '#000000',
enableTagOptions: true,
tagValuesAttribute: 'data-values',
colorMap: ["red", "green", "blue", "yellow", "orange", "#f2f2f2", "maroon", "pink"]
});
HTML
<p>
<span class="sparkline">Loading...</span>
</p>
请参考JSFIDDLE的代码.
现在我想在每个栏上添加图例名称和y轴值,如下所示.
sun,mon,tue是图例,条形顶部白色的值是y轴值.
但我无法实现它.
任何帮助,将不胜感激.
推荐指数
解决办法
查看次数
为什么kendo.web.min.js和kendo.dataviz.min.js发生冲突？
我拥有一个构建网格kendo.web.min.js与kendo.dataviz.min.js,但当我使用Using两个碰撞发生.
但有趣的是,项目jsfiddle它运作良好,但当我运行项目Visual Studio我遇到以下错误TypeError:s未定义
<link href="css/themes.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/base.css" rel="stylesheet" />
<link href="js/kendo/src/styles/kendo.dataviz.css" rel="stylesheet" />
<link href="js/kendo/styles/kendo.silver.min.css" rel="stylesheet" />
<link href="js/kendo/styles/kendo.common.min.css" rel="stylesheet" />
<script src="js/kendo/js/kendo.web.min.js"></script>
<script src="js/kendo/js/kendo.dataviz.min.js"></script>
<script src="js/kendo/src/js/kendo.dataviz.sparkline.js"></script>
推荐指数
解决办法
查看次数
使用迷你图绘制内联箱线图
我有一个数据集，如下所示
ID MinTemp MaxTemp Quartile1 Quartile2 Quartile3
28 19 88 23 63 80
43 18 78 25 57 77
11 34 118 52 81 101
我有兴趣学习如何使用Sparkline 包inline boxplot根据每一行相应的 , Min, Max, Quartile1,值创建一个 。Quartile2Quartile3
最终输出应如下所示
非常感谢任何有助于实现这一目标的帮助。
推荐指数
解决办法
查看次数
在 Shiny 中使用迷你图渲染数据表
我想在闪亮的 DT 中包含迷你图。它在 RStudio 查看器中工作正常，但在 Shiny 中不呈现迷你图。这是一个最小的例子。
# dependencies
require(sparkline)
require(DT)
require(shiny)
# create data with sparklines
spark_data <- data.frame(
id = c('spark1', 'spark2'),
spark = c(
spk_chr(values = 1:3, elementId = 'spark1'),
spk_chr(values = 3:1, elementId = 'spark2')
)
)
# render in RStudio viewer (this works)
tbl <- datatable(spark_data, escape = FALSE)
spk_add_deps(tbl)
# render in Shiny (no sparklines rendered in DT)
ui <- fluidPage(
sparklineOutput("test_spark"),
dataTableOutput("tbl")
)
server <- function(input, output) {
# sparkline outside DT (works …推荐指数
解决办法
查看次数
标签 统计
sparklines ×10
r ×5
jquery ×4
dt ×2
javascript ×2
shiny ×2
canvas ×1
css ×1
datatable ×1
datatables ×1
graph ×1
htmlwidgets ×1
kendo-grid ×1
kendo-ui ×1
knitr ×1
plot ×1
r-grid ×1
r-markdown ×1
tufte ×1