R Package Highcharter:如何向下钻取到多个系列堆积柱形图?
R Package Highcharter: How do I drilldown to multiple series stacked column graph?
我想深入到多个系列。
如何在向下钻取后更改 x 轴类别并仍然保持我的系列?
hc <- highchart() %>%
hc_chart(type = "column") %>%
hc_title(text = "Job Ratio") %>%
hc_xAxis(categories = c("Job A", "Job B")) %>%
hc_plotOptions(series = list(stacking = "normal")) %>%
hc_yAxis(max = 100) %>%
hc_add_series(name = "Completed",
data = list(list(y = 40, drilldown = "job-a"),
list(y = 35, drilldown = "job-a"))) %>%
hc_add_series(name = "No progress", data = c(60, 65)) %>%
hc_drilldown(
allowPointDrilldown = TRUE,
series = list(
list(
id = "job-a",
categories = c("Job A1", "Job A2"),
series = list(
list(
name = "Completed",
data = list(
list(y = 55),
list(y = 45)
)
),
list(
name = "No Progress",
data = list(
list(y = 45),
list(y = 55)
)
)
)
)
)
)
hc
这是初始图,单击作业 A 将向下钻取到图 2:
从作业 A 向下钻取的结果:
我需要稍微重建一下您的代码。您需要在 chart.events.drilldown 事件中使用 chart.addSingleSeriesAsDrilldown() 方法。这是您的全部代码:
hc <- highchart() %>%
hc_chart(
type = "column",
events = list(
drilldown = JS(
"function(e) {
if (!e.seriesOptions) {
var chart = this;
chart.addSingleSeriesAsDrilldown(e.point, {
color: Highcharts.getOptions().colors[0],
name: 'Completed',
data: [
['Job A1', 40],
['Job B1', 35]
]
});
chart.addSingleSeriesAsDrilldown(e.point, {
color: Highcharts.getOptions().colors[1],
name: 'No progress',
data: [
['Job A1', 60],
['Job B1', 65]
]
});
chart.applyDrilldown();
}
}"
)
)
) %>%
hc_title(text = "Job Ratio") %>%
hc_xAxis(type = "category") %>%
hc_plotOptions(series = list(stacking = "normal")) %>%
hc_yAxis(max = 100) %>%
hc_add_series(
name = "Completed",
data = list(
list(name = "Job A", y = 40, drilldown = T),
list(name = "Job B", y = 35, drilldown = T)
)
) %>%
hc_add_series(
name = "No progress",
data = list(
list(name = "Job A", y = 60),
list(name = "Job B", y = 65)
)
) %>%
hc_drilldown(
series = list()
)
hc
在这里你可以看看纯JS实现:https://jsfiddle.net/BlackLabel/m089w4yh
API: https://api.highcharts.com/highcharts/chart.events.drilldown
我想深入到多个系列。
如何在向下钻取后更改 x 轴类别并仍然保持我的系列?
hc <- highchart() %>%
hc_chart(type = "column") %>%
hc_title(text = "Job Ratio") %>%
hc_xAxis(categories = c("Job A", "Job B")) %>%
hc_plotOptions(series = list(stacking = "normal")) %>%
hc_yAxis(max = 100) %>%
hc_add_series(name = "Completed",
data = list(list(y = 40, drilldown = "job-a"),
list(y = 35, drilldown = "job-a"))) %>%
hc_add_series(name = "No progress", data = c(60, 65)) %>%
hc_drilldown(
allowPointDrilldown = TRUE,
series = list(
list(
id = "job-a",
categories = c("Job A1", "Job A2"),
series = list(
list(
name = "Completed",
data = list(
list(y = 55),
list(y = 45)
)
),
list(
name = "No Progress",
data = list(
list(y = 45),
list(y = 55)
)
)
)
)
)
)
hc
这是初始图,单击作业 A 将向下钻取到图 2:
从作业 A 向下钻取的结果:
我需要稍微重建一下您的代码。您需要在 chart.events.drilldown 事件中使用 chart.addSingleSeriesAsDrilldown() 方法。这是您的全部代码:
hc <- highchart() %>%
hc_chart(
type = "column",
events = list(
drilldown = JS(
"function(e) {
if (!e.seriesOptions) {
var chart = this;
chart.addSingleSeriesAsDrilldown(e.point, {
color: Highcharts.getOptions().colors[0],
name: 'Completed',
data: [
['Job A1', 40],
['Job B1', 35]
]
});
chart.addSingleSeriesAsDrilldown(e.point, {
color: Highcharts.getOptions().colors[1],
name: 'No progress',
data: [
['Job A1', 60],
['Job B1', 65]
]
});
chart.applyDrilldown();
}
}"
)
)
) %>%
hc_title(text = "Job Ratio") %>%
hc_xAxis(type = "category") %>%
hc_plotOptions(series = list(stacking = "normal")) %>%
hc_yAxis(max = 100) %>%
hc_add_series(
name = "Completed",
data = list(
list(name = "Job A", y = 40, drilldown = T),
list(name = "Job B", y = 35, drilldown = T)
)
) %>%
hc_add_series(
name = "No progress",
data = list(
list(name = "Job A", y = 60),
list(name = "Job B", y = 65)
)
) %>%
hc_drilldown(
series = list()
)
hc
在这里你可以看看纯JS实现:https://jsfiddle.net/BlackLabel/m089w4yh
API: https://api.highcharts.com/highcharts/chart.events.drilldown