Добавление второй оси X в Highcharts - PullRequest
Новая
       27

Добавление второй оси X в Highcharts

0 голосов
/ 20 сентября 2019

ПРИМЕЧАНИЕ: приведенный ниже код предназначен для Highcharts в R, но, очевидно, любое решение в «нормальном» коде Highcharts также приветствуется!

Я пытаюсь напечатать среднее(обозначено ромбовидным символом в приведенном ниже примере) и разница с эталоном (не включенным в приведенные ниже примеры данных) для горизонтальной гистограммы с накоплением.

Сначала я подумал построить второй график и объединить их с hw_grid, но их выравнивание действительно сложно.Поэтому я решил добавить числа в качестве меток на второй оси X.

Я знаю, что можно добавить несколько осей Y ( Две оси Y в Highcharter в R ,и https://www.highcharts.com/demo/combo-dual-axes), но поскольку это горизонтальная диаграмма, она должна быть осью X, а ее эквивалент не существует?

Вот фиктивные данные для воспроизведения в R: 

library(dplyr)
library(highcharter)

df1 = data.frame("label"= paste0("Label", c(1,1,1,2,2,2,3,3,3,4,4,4)), 
                "value" = c(-100,231,110, -189,299,198, -199,150,298, -90,180,155), 
                "grade" = rep(c("Disagree","Neutral","Agree"), 4))

df2 = data.frame("x" = c(0,1,2,3), 
                 "y" = c(200,100,250,280))

highchart() %>%
  hc_add_series(df1, type="bar", hcaes(x=label,y=value,group=grade)) %>%
  hc_add_series(df2, type="scatter", marker=list(symbol='diamond', radius=8)) %>%
  hc_plotOptions(bar = list(stacking="normal")) %>%
  hc_xAxis(type = "category") %>%
  hc_yAxis(visible=FALSE)

1 Ответ

2 голосов
/ 20 сентября 2019

Работает так же, как и с осью y: просто добавьте еще один объект оси в массив xAxis (убедитесь, что для него установлено противоположное = true), а затем для серии, которую вы хотите использовать, укажите xAxis = 1.

Вот пример (который использует категорические значения оси x, но это не обязательно): 

xAxis: [{
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    crosshair: true
},
{
    categories: ['1', '2', '3', '4', '5', '6',
        '7', '8', '9', '10', '11', '12'],
        opposite: true
}]

...

series: [{
    name: 'Rainfall',
    type: 'column',
    xAxis: 1, // this applies this data to the alternate (2nd axis) specified above
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    tooltip: {
        valueSuffix: ' mm'
    }

}, {
    name: 'Temperature',
    type: 'spline',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    tooltip: {
        valueSuffix: '°C'
    }
}]

В этом примере вы можете даже иметь 2 оси x и2 оси Y: https://jsfiddle.net/mzhukovs/8v167bcf/2/

...