具有多个y轴刻度的Highcharts polar spider
我用highcharts创建了一个极轴蜘蛛图,我想知道是否可以为每个类别设置比例(最小和最大)。正如Halvor Strand在他的评论中指出的,解决这个问题的一个可能方法是让每个图表点与图中心的距离不同 我选择创建一个“虚拟”线系列作为“不平衡”的图表点,同时使线后面的真实网格不可见 以下是“虚拟”系列的代码:具有多个y轴刻度的Highcharts polar spider,charts,highcharts,data-visualization,spider-chart,Charts,Highcharts,Data Visualization,Spider Chart,我用highcharts创建了一个极轴蜘蛛图,我想知道是否可以为每个类别设置比例(最小和最大)。正如Halvor Strand在他的评论中指出的,解决这个问题的一个可能方法是让每个图表点与图中心的距离不同 我选择创建一个“虚拟”线系列作为“不平衡”的图表点,同时使线后面的真实网格不可见 以下是“虚拟”系列的代码: { 名称:“最大/分钟类别的虚拟系列”, 数据标签:{ allowOverlap:是的, 启用:对, 格式化程序:函数(){ 返回this.point.name; }, 样式:{颜色:
{
名称:“最大/分钟类别的虚拟系列”,
数据标签:{
allowOverlap:是的,
启用:对,
格式化程序:函数(){
返回this.point.name;
},
样式:{颜色:“黑色”}
},
数据:[
{y:90000,名称:'Sales',数据标签:{align:'center',y:-5},
{y:70000,名称:'Marketing',数据标签:{align:'left',x:10,y:15},
{y:85000,名称:'Development',数据标签:{align:'left',x:10,y:15},
{y:80000,名称:'Customer Support',数据标签:{align:'center',y:30},
{y:95000,name:'Information
Technology',数据标签:{align:'right',x:-10,y:15},
{y:100000,名称:'Administration',数据标签:{align:'right',x:-10,y:15}}
],
pointPlacement:'on',
showInLegend:false,
enableMouseTracking:false,
线宽:2,
线条颜色:“红色”,
标记:{enabled:false}
}
我在这里所做的是为每个图表点手动设置“max”值,并给它们一个名称,以匹配通常在x轴类别中显示的内容
所有序列的dataLabels
属性返回每个数据点的name
属性。然后,对于每个数据点,都有唯一的dataLabels
属性来定位标签
为了隐藏x轴和y轴的网格线和标签,我分别添加了gridLineWidth:0
和标签:{enabled:false}
以下是结果的显示方式:
此示例中的工作小提琴可在中找到。因此您希望背景网格与中心的“长度”不同?不一定是不同的长度,而是不同的最小值和最大值,即对于A类,我有值从0到200,另一类B从0到1。目前,B类,我看不太清楚,因为比例是0到200。你知道怎么做吗?不幸的是,这是不可行的,请向我们的@SebastianBochan征求你的意见谢谢,太糟糕了。这就是我要做的。这个问题有更新吗?
{
name: 'dummy series for category max/mins',
dataLabels: {
allowOverlap: true,
enabled: true,
formatter:function() {
return this.point.name;
},
style:{color:"black"}
},
data: [
{ y: 90000, name: 'Sales', dataLabels: { align: 'center', y: -5 } },
{ y: 70000, name: 'Marketing', dataLabels: { align: 'left', x: 10, y: 15 } },
{ y: 85000, name: 'Development', dataLabels: { align: 'left', x: 10, y: 15 } },
{ y: 80000, name: 'Customer Support', dataLabels: { align: 'center', y: 30 } },
{ y: 95000, name: 'Information<br />Technology', dataLabels: { align: 'right', x: -10, y: 15 } },
{ y: 100000, name: 'Administration', dataLabels: { align: 'right', x: -10, y: 15 } }
],
pointPlacement: 'on',
showInLegend: false,
enableMouseTracking: false,
lineWidth: 2,
lineColor: 'red',
marker: { enabled: false }
}