- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如果您有 R highcharter 对象,如何将其导出到可以包含在 iframe 中的独立 html 文件中:
例如:
library(highcharter)
hc <- hchart(cbind(fdeaths, mdeaths), separate = FALSE)
然后,我正在寻找类似的东西:
save_as_html(hc,filename)
Matlab 的 HighChart 代码的工作原理如下:
hc = HighChart('datetime');
hc.series{1}.data = [ttt(ii3day), -vd(ii3day)];
hc.save('plot_hc.html');
生成的 plot_hc.html
代码类似于:
<!DOCTYPE html>
<html>
<body>
<div id="con_8rHh7YjNg4" class="HighChart" style="width:800px; height:400px;"></div></body>
<footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script>
$(function () {
$('#con_8rHh7YjNg4').highcharts({
chart:{type:'line',zoomType:'x',panning:'true',panKey:'shift'},
title:{text:'observations'},
xAxis:{title:{text:'UTC Time'},type:'datetime'},
yAxis:{title:{text:'feet'}},
series:[{name:'Observations',data:[[1508371860000,-1.089000e+01],[1508371920000,-1.086000e+01],[1508371980000,-1.085000e+01],[1508372040000,-1.085000e+01],[1508372100000,-1.084000e+01],[1508372160000,-1.083000e+01],[1508372220000,-1.081000e+01],[1508372280000,-1.082000e+01],[1508372340000,-1.081000e+01],[1508372400000,-1.080000e+01],[1508372460000,-1.080000e+01],[1508372520000,-1.078000e+01],[1508372580000,-1.078000e+01],[1508372640000,-1.077000e+01],[1508372700000,-1.077000e+01],[1508372760000,-1.075000e+01],[1508372820000,-1.075000e+01],[1508372880000,-1.076000e+01],[1508372940000,-1.073000e+01],[1508373000000,-1.070000e+01],[1508373060000,-1.071000e+01],[1508373120000,-1.072000e+01],[1508373180000,-1.071000e+01],[1508373240000,-1.069000e+01],[1508373300000,-1.068000e+01],[1508373360000,-1.068000e+01],[1508373420000,-1.067000e+01],[1508373480000,-1.066000e+01],[1508373540000,-1.067000e+01],[1508373600000,-1.064000e+01],[1508373660000,-1.063000e+01],[1508373720000,-1.062000e+01],[1508373780000,-1.062000e+01],
});
});
</script>
</footer>
</html>
这种 html 文件可以作为 iframe 在我机构的内容管理系统中轻松工作,我想用 R 做类似的事情。
我尝试过 export_hc(hc,"plot_hc.html")
但它似乎只是 javascript。 ?export_hc()
帮助显得难以理解。我该如何处理输出?我是否可以像 matlab 结果一样将其直接插入到模板中?
我尝试过 highchartOutput(hc)
和 highchartOutput2(hc)
但我不确定如何使用返回值。
预计到达时间:
我使用的是 0.5.0 版本 https://github.com/jbkunst/highcharter/blob/v0.5.0/R/export_hc.R
使用 matlab 模板进行实验,如果我更改 div id 以匹配 export_hc 默认容器,似乎可以正常工作,如下所示:
<!DOCTYPE html>
<html>
<body>
<div id="container" class="HighChart" style="width:800px; height:400px;"></div></body>
<footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script>
.... export_hc() output pasted here
</script>
</footer>
</html>
看起来当前 github 版本的 highcharter::export_hc() 包含用于命名容器和格式化结果的附加选项,这些选项在 v0.5.0 版本中不可用。
预计到达时间:
如果我重写export_hc函数并添加一个丑陋的辅助函数,如下所示:
library(highcharter)
my_export_hc <- function (hc, filename = NULL)
{
. <- NULL
jslns <- hc$x$hc_opts %>% toJSON(pretty = TRUE, auto_unbox = TRUE,
force = TRUE, null = "null") %>% str_split("\n") %>%
head(1) %>% unlist() %>% str_replace("\"", "") %>% str_replace("\":",
":")
fflag <- str_detect(jslns, "function()")
if (any(fflag)) {
jslns <- ifelse(fflag, str_replace(jslns, "\"function",
"function"), jslns)
jslns <- ifelse(fflag, str_replace(jslns, "\",$", ","),
jslns)
jslns <- ifelse(fflag, str_replace(jslns, "\"$", ""),
jslns)
jslns <- ifelse(fflag, str_replace_all(jslns, "\\\\n",
str_c("\\\\n", str_extract(jslns, "^\\s+"))), jslns)
}
jslns <- jslns %>% unlist() %>% tail(-1) %>% str_c(" ",
., collapse = "\n") %>% str_replace_all("\n\\s{4,}\\]\\,\n\\s{4,}\\[\n\\s{4,}",
"],[") %>% sprintf("$(function () {\n $('#container').highcharts({\n%s\n );\n});",
.)
if(length(filename)>0) {
if (!str_detect(filename, ".js$"))
filename <- str_c(filename, ".js")
writeLines(jslns, filename)
}
else return(jslns)
}
environment(my_export_hc) <- asNamespace('highcharter')
my_save_hc <- function(hc,filename){
prefix_hc = '<!DOCTYPE html>
<html>
<body>
<div id="container" class="HighChart" style="width:800px; height:400px;"></div></body>
<footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script>
'
suffix_hc = '</script>
</footer>
</html>
'
cat(prefix_hc,my_export_hc(hc),suffix_hc,file=filename)
}
然后像这样的代码就可以工作:
library(highcharter)
hc <- hchart(cbind(fdeaths, mdeaths), separate = FALSE)
my_save_hc(hc,"junk.html")
生产
<!DOCTYPE html>
<html>
<body>
<div id="container" class="HighChart" style="width:800px; height:400px;"></div></body>
<footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script>
$(function () {
$('#container').highcharts({
title: {
text: null
},
yAxis: {
title: {
text: null
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
turboThreshold: 0
},
treemap: {
layoutAlgorithm: "squarified"
},
bubble: {
minSize: 5,
maxSize: 25
}
},
annotationsOptions: {
enabledButtons: false
},
tooltip: {
delayForDisplay: 10
},
xAxis: {
type: "datetime"
},
series: [
{
data: [
[
126230400000,
901],[128908800000,
689],[131328000000,
827],[134006400000,
677],[136598400000,
522],[139276800000,
406],[141868800000,
441],[144547200000,
393],[147225600000,
387],[149817600000,
582],[152496000000,
//....
940],[307584000000,
1081],[310262400000,
1294],[312854400000,
1341
]
],
name: "mdeaths",
id: "mdeaths"
}
]
}
);
}); </script>
</footer>
</html>
最佳答案
尝试使用htmlwidgets::saveWidget
:
library(highcharter)
library(htmlwidgets)
hc <- hchart(cbind(fdeaths, mdeaths), separate = FALSE)
saveWidget(hc, file="highchart.html")
输出为:
关于R highcharter -- 将图表保存到外部 iframe 的 html 文件吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46869920/
如何将导出模块包含到 angular2 应用程序中? 我尝试将以下脚本添加到 index.html 但没有任何反应。 最佳答案 从 Angular CLI 1.0-RC.1 和最新的 angular
我正在为 Web 应用程序使用 HighCharts Javascript 库。当我下载 Highchart 时,我需要 Highchart 水印图像。 我正在使用普通的 hicgchart 代码。
我是 highcharts 的新手。默认情况下,Highchart 在图表本身内显示工具提示。这是否可以在图表外部显示工具提示,并显示在与内部显示相同的位置。有帮助吗? 最佳答案 您可以定义自己的 d
我正在尝试使用日期时间格式的数据创建 highcharts 热图。数据以小时为单位,持续数天。我不希望图表每天都环绕,但希望所有数据都在一条线上。 具体来说,它用于显示每小时的云量百分比,因此每个热图
我正在用 angular 中的简单图形来验证 highcharts。但是导出按钮不显示。我在 html 页面中添加脚本: 并在图表中添加属性: export :true, navigat
我很想知道为什么按钮 2 在这个 example 中不起作用 在这个 jsfiddle 示例中,附加到按钮 1 的“更新”方法正在运行,但在我的原始代码中,“更新”也不起作用。它显示错误:“对象# 没
我正在尝试在 highcharts 中编辑工具提示的边框。 我遇到的问题是我只想显示底部边框。 例如,您可以执行以下操作: tooltip: {borderWidth: 10}//但问题是在整个工具提
Highcharts的十字线可以显示在面积图的顶部而不是隐藏在其下方吗? 这是问题jsfiddle.net/hHjZb/1286/的示例 最佳答案 更新: Highcharts现在已经实现了the O
在将图表导出为PNG时,我试图在饼图上添加图例。 这是我的代码: var chart_23_106; $(document).ready(function () { chart_23_106 = ne
带三角规的半圆饼 如何在图表顶部创建带有三角形仪表的上述半圆饼图。 我的车速表可以工作,但不能满足需要。 在highchart api中有没有办法使用三角形作为仪表,而不是车速表? 谢谢 最佳答案 这
我们使用的是Highchart气泡图,但是,当气泡x和y在图中位于同一位置且气泡y较小时,将无法看到或单击得很少的气泡。 有什么方法可以先绘制较大的气泡,然后在顶部绘制较小的气泡?还是说较小的始终位于
是否可以使用百分比设置 Highcharts 的宽度?每当调整页面大小时,图表应具有足够的响应速度以适合页面大小吗? One Solution 这里的问题是我有3个图表需要并排显示,每次调整页面大小时
我在更新基本列 Highcharts 时遇到问题。 我从服务器返回的 json 数组是: [{"name":"positive","data":[18,35,32,38]},{"name":"nega
有没有办法创建重叠的列? 例如在 this jsFiddle ,蓝色和红色列应如下所示相互重叠,蓝色在后面,红色在前面。 澄清一下,我不想要堆叠的列,蓝色和红色列都应该从 xAxis (y=0) 开始
如何自定义图例 从 对此 最佳答案 查看 Highcharts legend api 选项。您可以使用所需的 css 进一步自定义。使用适当的 svg 图像(背景颜色取自图表本身) legend: {
我正在尝试使用模式作为列范围以允许条形图工作。 图案出现但不使用预定义的图案,所以它只是纯蓝色。通常它使用已定义的条纹图案,并在散点图等上完美运行。 这是一个片段,展示了我的意思: Highchar
我正在使用 HighStock JS 库生成一个图表,该图表使用 xAxis 的线性序列(不是时间序列)。 我仍然想使用范围选择器来缩放到我的线性系列中的预定范围。这可能吗? 例如;说我的 xAxis
我需要从一个系列向下钻取到多个系列。但是下钻 id 在一个系列上似乎是唯一的,这意味着我无法从单个系列下钻到多个系列;只有一个。我该如何解决这个问题? 最佳答案 可以使用 chart.addSingl
我制作了一个带有分组和堆叠列的Highcharts图表,就像在这里的示例http://www.highcharts.com/demo/column-stacked-and-grouped一样。该示例显
如何在 highcharts/highstock 中将滚动条位置设置为Left? 如图表加载时的图像所示, 滚动条自动右对齐。 有没有办法将它定位到左侧? 最佳答案 我们可以通过将 min 设置为 0
我是一名优秀的程序员,十分优秀!