在 Highcharts 中添加第二个 x 轴
Adding a second x-axis in Highcharts
注意:以下代码适用于 R 中的 Highcharts,但显然 'normal' Highcharts 代码中的任何解决方案也非常受欢迎!
我正在尝试将平均值(在下面的示例中用菱形符号表示)和与基准的差异(不包括在下面的示例数据中)打印到水平堆积条形图。
起初我想绘制第二张图,然后将它们与 hw_grid
结合起来,但是对齐它们真的很棘手。因此我想我应该将数字添加为第二个 x 轴上的标签。
我知道可以添加多个y轴(, and 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)
与 y 轴的工作方式相同:只需将另一个轴对象添加到 xAxis 数组(确保为其设置 opposite = 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/
注意:以下代码适用于 R 中的 Highcharts,但显然 'normal' Highcharts 代码中的任何解决方案也非常受欢迎!
我正在尝试将平均值(在下面的示例中用菱形符号表示)和与基准的差异(不包括在下面的示例数据中)打印到水平堆积条形图。
起初我想绘制第二张图,然后将它们与 hw_grid
结合起来,但是对齐它们真的很棘手。因此我想我应该将数字添加为第二个 x 轴上的标签。
我知道可以添加多个y轴(
这是要在 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)
与 y 轴的工作方式相同:只需将另一个轴对象添加到 xAxis 数组(确保为其设置 opposite = 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/