具有多个y轴刻度的Highcharts极地蜘蛛

时间:2014-07-31 18:02:05

标签: charts highcharts data-visualization spider-chart

我用highcharts http://www.highcharts.com/demo/polar-spider创建了一个极地蜘蛛图,我想知道是否可以为每个类别设置比例(最小值和最大值)。

1 个答案:

答案 0 :(得分:0)

正如Halvor Strand在评论中指出的那样,解决这个问题的一种可能方法是让每个图表点与图表中心的距离不同。

我选择创建一个“虚拟”线系列作为“不平衡”的图表点,同时使线条背后的真实网格不可见。

以下是“虚拟”系列的代码:

    {
      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 }
    }

我在这里做的是手动设置每个图表点的“最大”值,并给它们一个名称,以匹配通常在x轴类别中显示的值。

所有系列的dataLabels属性都会返回每个数据点的name属性。然后,对于每个数据点,都有唯一的dataLabels属性来定位标签。

为了隐藏x轴和y轴的网格线和标签,我为每个轴添加了gridLineWidth: 0labels: { enabled: false }

以下是结果的显示方式:

enter image description here

可以在http://jsfiddle.net/brightmatrix/bjrm0cr3/找到这个例子的工作小提琴。