Как настроить график highcharts в R - PullRequest
Новая
       29

Как настроить график highcharts в R

0 голосов
/ 07 мая 2020

Я хочу использовать highcharts js library в R для интерактивного построения - 

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)

С этим я хочу достичь следующих целей -

  1. Я хочу, чтобы общее количество grid-lines всегда было 10 как в x, так и в y направлении
  2. Я также хочу иметь border для области графика

Мы будем благодарны за любой указатель.

1 Ответ

0 голосов
/ 08 мая 2020

gridLines размещаются там, где деления , поэтому, если вы хотите иметь 10 gridLines, вам нужно иметь 10 тактов. Вы можете установить axis.tickAmount равным 10, но этот параметр работает только с осями 'linear' . Ваш yAxis «линейный», но ваш xAxis - «datetime». Вам нужно изменить его на «линейный». Когда вы это сделаете, вы потеряете форматирование меток дат, поэтому вам придется форматировать их самостоятельно. Для этого я использовал метод 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

...