如何在 R 中自定义 highcharts 图
How to customise the highcharts plot in R
我想在R
中使用highcharts
js library
进行交互绘图-
library(highcharter)
Data =
structure(list(date = structure(c(18361, 18362, 18363, 18364,
18365, 18366, 18367, 18368, 18369, 18370, 18371, 18372, 18373,
18374, 18375, 18376, 18377, 18378, 18379, 18380), class = "Date"),
variable = c("aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa",
"aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa",
"aaa", "aaa", "aaa", "aaa"), value = c(-12.7015856459843,
4932.54512619195, 4337.84840857512, -1571.78718535286, -1475.28222178705,
4232.12003534889, 6536.12700338211, 2413.36143649343, 7711.43571028106,
5461.46337941179, 665.728647378994, 6007.98203770009, -900.505732433108,
12397.2655306638, 15182.2497643643, 4654.17811998194, 1673.36119858179,
10611.5994058113, 7510.88576801876, 20669.8626227112)), row.names = c(NA,
20L), class = "data.frame")
hchart(Data, "line", plotBorderWidth = 0.2, plotBorderColor = '#070707',
hcaes(x = as.Date(as.Date(date)), y = value)) %>%
hc_xAxis(title = NULL, reversed = FALSE, gridLineWidth = 1, type = 'datetime') %>%
hc_yAxis(title = "", gridLineWidth = 0.2, minorGridLineWidth = 0, gridLineColor = '#070707', opposite = TRUE)
有了这个,我想实现以下目标-
- 我希望
grid-lines
的总数在 x
和 y
方向上总是 10
- 我也想要一个
border
的地块区域
任何指点将不胜感激。
gridLines 放置在 ticks 所在的位置,因此如果您想要 10 条 gridLines,则需要有 10 个 ticks。您可以将 axis.tickAmount 设置为 10,但此选项仅适用于 'linear' 轴。你的 yAxis 是 'linear',但你的 xAxis 是 'datetime'。您需要将其更改为 'linear'。当你这样做时,你会丢失日期标签格式,所以你需要自己格式化它们。为此,我使用了 xAxis.labels.formatter 和 Highcharts.dateFormat() 方法。为了注入 JavaScript 代码,我还使用了 JS("...") 函数。
要获得绘图边框,您可以使用 chart.plotBorderWidth 属性.
如果您想自己定义刻度位置,可以使用 axis.tickPositions
这是完整的代码:
library(highcharter)
Data =
structure(list(date = structure(c(18361, 18362, 18363, 18364,
18365, 18366, 18367, 18368, 18369, 18370, 18371, 18372, 18373,
18374, 18375, 18376, 18377, 18378, 18379, 18380), class = "Date"),
variable = c("aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa",
"aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa",
"aaa", "aaa", "aaa", "aaa"), value = c(-12.7015856459843,
4932.54512619195, 4337.84840857512, -1571.78718535286, -1475.28222178705,
4232.12003534889, 6536.12700338211, 2413.36143649343, 7711.43571028106,
5461.46337941179, 665.728647378994, 6007.98203770009, -900.505732433108,
12397.2655306638, 15182.2497643643, 4654.17811998194, 1673.36119858179,
10611.5994058113, 7510.88576801876, 20669.8626227112)), row.names = c(NA,
20L), class = "data.frame")
hchart(Data, "line", plotBorderWidth = 0.2, plotBorderColor = '#070707',
hcaes(x = as.Date(as.Date(date)), y = value)) %>%
hc_chart(plotBorderWidth = 2) %>%
hc_xAxis(title = NULL, reversed = FALSE, gridLineWidth = 1, type = 'linear', tickAmount = 10, labels = list(formatter = JS("function () {
return Highcharts.dateFormat('%d. %b', this.value);
}"))) %>%
hc_yAxis(title = "", gridLineWidth = 0.2, minorGridLineWidth = 0, gridLineColor = '#070707', opposite = TRUE, tickAmount = 10)
在这里您可以找到 API 所有已用选项的参考:
https://api.highcharts.com/highcharts/xAxis.tickAmount
https://api.highcharts.com/highcharts/xAxis.labels.formatter
https://api.highcharts.com/class-reference/Highcharts#.dateFormat
https://api.highcharts.com/highcharts/xAxis.type
https://api.highcharts.com/highcharts/xAxis.tickPositions
https://api.highcharts.com/highcharts/chart.plotBorderWidth
我想在R
中使用highcharts
js library
进行交互绘图-
library(highcharter)
Data =
structure(list(date = structure(c(18361, 18362, 18363, 18364,
18365, 18366, 18367, 18368, 18369, 18370, 18371, 18372, 18373,
18374, 18375, 18376, 18377, 18378, 18379, 18380), class = "Date"),
variable = c("aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa",
"aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa",
"aaa", "aaa", "aaa", "aaa"), value = c(-12.7015856459843,
4932.54512619195, 4337.84840857512, -1571.78718535286, -1475.28222178705,
4232.12003534889, 6536.12700338211, 2413.36143649343, 7711.43571028106,
5461.46337941179, 665.728647378994, 6007.98203770009, -900.505732433108,
12397.2655306638, 15182.2497643643, 4654.17811998194, 1673.36119858179,
10611.5994058113, 7510.88576801876, 20669.8626227112)), row.names = c(NA,
20L), class = "data.frame")
hchart(Data, "line", plotBorderWidth = 0.2, plotBorderColor = '#070707',
hcaes(x = as.Date(as.Date(date)), y = value)) %>%
hc_xAxis(title = NULL, reversed = FALSE, gridLineWidth = 1, type = 'datetime') %>%
hc_yAxis(title = "", gridLineWidth = 0.2, minorGridLineWidth = 0, gridLineColor = '#070707', opposite = TRUE)
有了这个,我想实现以下目标-
- 我希望
grid-lines
的总数在x
和y
方向上总是10
- 我也想要一个
border
的地块区域
任何指点将不胜感激。
gridLines 放置在 ticks 所在的位置,因此如果您想要 10 条 gridLines,则需要有 10 个 ticks。您可以将 axis.tickAmount 设置为 10,但此选项仅适用于 'linear' 轴。你的 yAxis 是 'linear',但你的 xAxis 是 'datetime'。您需要将其更改为 'linear'。当你这样做时,你会丢失日期标签格式,所以你需要自己格式化它们。为此,我使用了 xAxis.labels.formatter 和 Highcharts.dateFormat() 方法。为了注入 JavaScript 代码,我还使用了 JS("...") 函数。
要获得绘图边框,您可以使用 chart.plotBorderWidth 属性.
如果您想自己定义刻度位置,可以使用 axis.tickPositions
这是完整的代码:
library(highcharter)
Data =
structure(list(date = structure(c(18361, 18362, 18363, 18364,
18365, 18366, 18367, 18368, 18369, 18370, 18371, 18372, 18373,
18374, 18375, 18376, 18377, 18378, 18379, 18380), class = "Date"),
variable = c("aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa",
"aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa", "aaa",
"aaa", "aaa", "aaa", "aaa"), value = c(-12.7015856459843,
4932.54512619195, 4337.84840857512, -1571.78718535286, -1475.28222178705,
4232.12003534889, 6536.12700338211, 2413.36143649343, 7711.43571028106,
5461.46337941179, 665.728647378994, 6007.98203770009, -900.505732433108,
12397.2655306638, 15182.2497643643, 4654.17811998194, 1673.36119858179,
10611.5994058113, 7510.88576801876, 20669.8626227112)), row.names = c(NA,
20L), class = "data.frame")
hchart(Data, "line", plotBorderWidth = 0.2, plotBorderColor = '#070707',
hcaes(x = as.Date(as.Date(date)), y = value)) %>%
hc_chart(plotBorderWidth = 2) %>%
hc_xAxis(title = NULL, reversed = FALSE, gridLineWidth = 1, type = 'linear', tickAmount = 10, labels = list(formatter = JS("function () {
return Highcharts.dateFormat('%d. %b', this.value);
}"))) %>%
hc_yAxis(title = "", gridLineWidth = 0.2, minorGridLineWidth = 0, gridLineColor = '#070707', opposite = TRUE, tickAmount = 10)
在这里您可以找到 API 所有已用选项的参考: https://api.highcharts.com/highcharts/xAxis.tickAmount https://api.highcharts.com/highcharts/xAxis.labels.formatter
https://api.highcharts.com/class-reference/Highcharts#.dateFormat https://api.highcharts.com/highcharts/xAxis.type https://api.highcharts.com/highcharts/xAxis.tickPositions https://api.highcharts.com/highcharts/chart.plotBorderWidth