Tof*_*Tof 6 charts data-visualization highcharts spider-chart
我用highcharts http://www.highcharts.com/demo/polar-spider创建了一个极地蜘蛛图,我想知道是否可以为每个类别设置比例(最小值和最大值).
正如 Halvor Strand 在他的评论中指出的那样,解决这个问题的一种可能方法是让每个图表点距图表中心的距离不同。
我选择创建一个“虚拟”线系列作为“不平衡”图表点,同时使线后面的真实网格不可见。
这是“dummy”系列的代码:
{
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 }
}
Run Code Online (Sandbox Code Playgroud)
我在这里所做的是手动设置每个图表点的“最大值”,并为它们指定一个名称以匹配通常在 x 轴类别中显示的名称。
dataLabels所有系列的属性返回每个数据点的属性name。然后,对于每个数据点,都有独特的dataLabels属性来定位标签。
为了隐藏 x 轴和 y 轴的网格线和标签,我向每个轴添加了gridLineWidth: 0和labels: { enabled: false }。
结果如下:
此示例的工作小提琴可以在http://jsfiddle.net/brightmatrix/bjrm0cr3/找到。