Highcharts 多轴上具有多个刻度的蜘蛛网海图
我的要求是创建一个蜘蛛网高度图,每个轴上都有不同的数值,每个轴都有不同的刻度。有可能吗?我已经附上了我的要求相同的输出Highcharts 多轴上具有多个刻度的蜘蛛网海图,highcharts,spider-chart,Highcharts,Spider Chart,我的要求是创建一个蜘蛛网高度图,每个轴上都有不同的数值,每个轴都有不同的刻度。有可能吗?我已经附上了我的要求相同的输出 使用多个Y轴,并将它们分配给带有startAngle的分隔窗格 解析器 var colors = Highcharts.getOptions().colors, each = Highcharts.each, series = [{ yAxis: 0, data: [10, 20, 30] }, { yAxis: 1,
使用多个Y轴,并将它们分配给带有startAngle的分隔窗格 解析器
var colors = Highcharts.getOptions().colors,
each = Highcharts.each,
series = [{
yAxis: 0,
data: [10, 20, 30]
}, {
yAxis: 1,
data: [1, 2, 3]
}, {
yAxis: 2,
data: [4, 2, 1]
}, {
yAxis: 3,
data: [5, 1, 3]
}, {
yAxis: 4,
data: [2, 3, 4]
}],
yAxis = [],
panes = [],
startAngle = 0;
each(series, function(serie, i) {
yAxis.push({
pane: i,
showLastLabel: true,
gridLineWidth: i === 0 ? true : false,
labels: {
useHTML: true,
formatter: function() {
return '<span style="color:' + colors[i] + '">' + this.value + '</span>';
}
}
});
panes.push({
startAngle: startAngle
});
startAngle += 72;
});
示例:
窗格
属性。然而,我正在修补另一种方法,希望与您和社区分享
我的解决方案使用了“虚拟”系列,这是一个用户看不到或与之交互的系列,但可以帮助用户使用自定义功能,如标签
我添加了六个“虚拟”系列,其中包含蜘蛛图每个轮辐的标签。第一个“零”值为空,但其他值将显示沿辐条的第一、第二、第三等点的数据标签
绘制图表后,我使用addSeries()
函数将这些“虚拟”系列添加到图表中:
// Add "dummy series to control the custom labels.
// We will add one for each spoke, but first will always be
// overriden by y-axis labels; I could not figure out how to
// disable that behavior.
// The color, showInLegend, and enableMouseTracking attributes
// prevent the user from seeing or interacting with the series
// as they are only used for the custom labels.
var chart = $('#container').highcharts();
var labelArray = [
['','1','2','3','4','5'],
['','j','k','l','m','n'],
['','one','two','three','four','five'],
['','u','v','w','x','y'],
['','a','b','c','d','e']
];
for (var i = 0; i<=5; i++) {
chart.addSeries({
name: 'dummy series #' + i + ' for label placement',
data: [
{ name: labelArray[0][i], y: i },
{ name: labelArray[1][i], y: i },
{ name: labelArray[2][i], y: i },
{ name: labelArray[3][i], y: i },
{ name: labelArray[4][i], y: i }
],
dataLabels: {
enabled: true, padding: 0, y: 0,
formatter: function() {
return '<span style="font-weight: normal;">' + this.point.name + '</span>';
}
},
pointPlacement: 'on',
lineWidth: 0,
color: 'transparent',
showInLegend: false,
enableMouseTracking: false
});
}
//添加“虚拟系列”以控制自定义标签。
//我们将为每个发言添加一个,但第一个始终是
//被y轴标签覆盖;我不知道如何
//禁用该行为。
//颜色、showInLegend和enableMouseTracking属性
//阻止用户查看该系列或与之交互
//因为它们仅用于自定义标签。
var chart=$(“#容器”).highcharts();
var labelArray=[
['','1','2','3','4','5'],
['','j','k','l','m','n'],
一、二、三、四、五、,
['','u','v','w','x','y'],
['','a','b','c','d','e']
];
对于(var i=0;我支持你的建议Mike Zavarello。这很有帮助。但是在你的建议中,如果某个轴的刻度比另一个轴的刻度高,它不会自动调整。请看一下这个JSFIDLE。有没有任何可能的方法来解决这个问题?请提出建议。@Sanjait你将无法plo在这种类型的图表上,不要使用完全不同的值,例如[3200,4,3,4]
。蜘蛛图或极坐标图的辐条都是从相同的比例或间隔工作的。如果您只是想显示比较值,而不是严格的数字值,您可以将数据点划分为适合其他辐条的比例(例如200/100以获得2).
// Add "dummy series to control the custom labels.
// We will add one for each spoke, but first will always be
// overriden by y-axis labels; I could not figure out how to
// disable that behavior.
// The color, showInLegend, and enableMouseTracking attributes
// prevent the user from seeing or interacting with the series
// as they are only used for the custom labels.
var chart = $('#container').highcharts();
var labelArray = [
['','1','2','3','4','5'],
['','j','k','l','m','n'],
['','one','two','three','four','five'],
['','u','v','w','x','y'],
['','a','b','c','d','e']
];
for (var i = 0; i<=5; i++) {
chart.addSeries({
name: 'dummy series #' + i + ' for label placement',
data: [
{ name: labelArray[0][i], y: i },
{ name: labelArray[1][i], y: i },
{ name: labelArray[2][i], y: i },
{ name: labelArray[3][i], y: i },
{ name: labelArray[4][i], y: i }
],
dataLabels: {
enabled: true, padding: 0, y: 0,
formatter: function() {
return '<span style="font-weight: normal;">' + this.point.name + '</span>';
}
},
pointPlacement: 'on',
lineWidth: 0,
color: 'transparent',
showInLegend: false,
enableMouseTracking: false
});
}