内半径极地 Highcharter
inner radius polar Highcharter
我正在尝试使用 highcharter
更改极坐标图的内半径,这样我就可以像在来自 fivethirtyeight
的这个很棒的 D3
图表中那样通过移动工具提示来可视化数据.
我知道可以像 this 示例中那样使用 solid gauge
可视化数据,但我希望数据在 polar
.
中可见
我试过更改 innerSize
和 innerRadius
参数,但我无法完成。
这是我的 R
代码:
library(tidyverse)
library(highcharter)
highchart() %>%
hc_chart(polar = T, type = "bar") %>%
hc_title(text = "Athlete 1 vs Athlete 2") %>%
hc_xAxis(categories = c("Total Score", "Avg. Score", "Sum Score",
"Best Score"),
tickmarkPlacement = "on",
plotLines = list(
list(label = list(
rotation = 90))
)
) %>%
hc_yAxis(min = 0) %>%
hc_series(
list(
name = "Athlete 1",
data = c(43000, 19000, 60000, 35000)
),
list(
name = "Athlete 2",
data = c(50000, 39000, 42000, 31000)
)
) %>%
hc_colors(c("firebrick", "steelblue"))
所需的输出类似于:
谢谢!
编辑
在@ppotaczek 的回答后,我更新了他的图表,因此所需的更新如下所示:
要在 Highcharts 极坐标图中获得类似的结果,您应该将 pointPadding 和 groupPadding 设置为 0。要创建一个空的 space 在图表的中间,您可以对 yAxis 使用 Highcharts.SVGRenderer 和 offset。
Highcharts.chart('container', {
chart: {
polar: true,
type: 'bar',
events: {
render: function() {
var chart = this,
middleElement = chart.middleElement;
if (middleElement) {
middleElement.destroy();
}
chart.middleElement = chart.renderer.circle(chart.plotSizeX / 2 + chart.plotLeft, chart.plotHeight / 2 + chart.plotTop, 20).attr({
zIndex: 3,
fill: '#ffffff'
}).add();
}
}
},
yAxis: {
offset: 20
},
series: [{
pointPadding: 0,
groupPadding: 0,
name: "Athlete 1",
data: [43000, 19000, 60000, 35000]
}, {
pointPadding: 0,
groupPadding: 0,
name: "Athlete 2",
data: [50000, 39000, 42000, 31000]
}]
});
现场演示:http://jsfiddle.net/BlackLabel/y6uL180j/
API参考:https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle
编辑:
To display value from hovered point in the middle of the chart, use tooltip with proper options:
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
headerFormat: '',
pointFormatter: function() {
return this.y / 1000 + 'k'
},
positioner: function(labelWidth, labelHeight) {
return {
x: (this.chart.plotSizeX - labelWidth) / 2 + this.chart.plotLeft,
y: (this.chart.plotSizeY - labelHeight) / 2 + this.chart.plotTop
};
}
}
我正在尝试使用 highcharter
更改极坐标图的内半径,这样我就可以像在来自 fivethirtyeight
的这个很棒的 D3
图表中那样通过移动工具提示来可视化数据.
我知道可以像 this 示例中那样使用 solid gauge
可视化数据,但我希望数据在 polar
.
我试过更改 innerSize
和 innerRadius
参数,但我无法完成。
这是我的 R
代码:
library(tidyverse)
library(highcharter)
highchart() %>%
hc_chart(polar = T, type = "bar") %>%
hc_title(text = "Athlete 1 vs Athlete 2") %>%
hc_xAxis(categories = c("Total Score", "Avg. Score", "Sum Score",
"Best Score"),
tickmarkPlacement = "on",
plotLines = list(
list(label = list(
rotation = 90))
)
) %>%
hc_yAxis(min = 0) %>%
hc_series(
list(
name = "Athlete 1",
data = c(43000, 19000, 60000, 35000)
),
list(
name = "Athlete 2",
data = c(50000, 39000, 42000, 31000)
)
) %>%
hc_colors(c("firebrick", "steelblue"))
所需的输出类似于:
谢谢!
编辑
在@ppotaczek 的回答后,我更新了他的图表,因此所需的更新如下所示:
要在 Highcharts 极坐标图中获得类似的结果,您应该将 pointPadding 和 groupPadding 设置为 0。要创建一个空的 space 在图表的中间,您可以对 yAxis 使用 Highcharts.SVGRenderer 和 offset。
Highcharts.chart('container', {
chart: {
polar: true,
type: 'bar',
events: {
render: function() {
var chart = this,
middleElement = chart.middleElement;
if (middleElement) {
middleElement.destroy();
}
chart.middleElement = chart.renderer.circle(chart.plotSizeX / 2 + chart.plotLeft, chart.plotHeight / 2 + chart.plotTop, 20).attr({
zIndex: 3,
fill: '#ffffff'
}).add();
}
}
},
yAxis: {
offset: 20
},
series: [{
pointPadding: 0,
groupPadding: 0,
name: "Athlete 1",
data: [43000, 19000, 60000, 35000]
}, {
pointPadding: 0,
groupPadding: 0,
name: "Athlete 2",
data: [50000, 39000, 42000, 31000]
}]
});
现场演示:http://jsfiddle.net/BlackLabel/y6uL180j/
API参考:https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle
编辑: To display value from hovered point in the middle of the chart, use tooltip with proper options:
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
headerFormat: '',
pointFormatter: function() {
return this.y / 1000 + 'k'
},
positioner: function(labelWidth, labelHeight) {
return {
x: (this.chart.plotSizeX - labelWidth) / 2 + this.chart.plotLeft,
y: (this.chart.plotSizeY - labelHeight) / 2 + this.chart.plotTop
};
}
}