在 Highcharts 中添加第二个 x 轴

Question

注意：以下代码适用于 R 中的 Highcharts，但显然，“普通”Highcharts 代码中的任何解决方案也非常受欢迎！

我正在尝试将平均值（在下面的示例中由菱形符号表示）以及与基准的差异（不包含在下面的示例数据中）打印到水平堆叠条形图。

起初我想绘制第二张图，并将它们与hw_grid 结合起来，但对齐它们真的很棘手。因此，我想我会将数字添加为第二个 x 轴上的标签。

我知道可以添加多个 y 轴（Two y Axis in Highcharter in 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)

Answer 1

与 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/