0

I am using Highcharts.com to create a Spider chart. My data is normalised (each value in the series is in the range [0.0, 1.0]). It may happen that for a given polyline, some/all of the values are exactly 0.0: this makes part or all of the polyline to degenerate in a line or even a single dot. See the following a Minimal Working Example (I'd post a picture but I am not yet allowed to): I am referring to the Degenerate Case (the third line). I would like, for instance, to shift each axis so that it displays values in the range [-0.15, 1.0], so that even in the worst case I have a proper area. This would improve a lot the readability of the graph. After reading the online manual, I tried several combinations of offset, padding, etc. (with both min and max) that suggest to help somehow, but I had no success.

$(function () {
  $('#container').highcharts({
    chart: {
      polar: true,
      type: 'line'
    },
    title: {
      text: 'Budget vs spending',
      x: -80
    },
    pane: {
      size: '80%'
    },
    xAxis: {
      categories: ['Sales', 'Marketing', 'Development', 'Customer Support', 
        'Information Technology', 'Administration'],
      tickmarkPlacement: 'on',
      lineWidth: 0
    },
    yAxis: {
      gridLineInterpolation: 'polygon',
      lineWidth: 0,
      min: 0
    },
    tooltip: {
      shared: true,
      pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
    },
    legend: {
      align: 'right',
      verticalAlign: 'top',
      y: 70,
      layout: 'vertical'
    },
    series: [{
      name: 'Allocated Budget',
      data: [1.00, 0.40, 0.80, 0.50, 0.90, 0.20],
      pointPlacement: 'on'
    }, {
      name: 'Actual Spending',
      data: [0.00, 0.30, 0.00, 0.80, 0.90, 0.70],
      pointPlacement: 'on'
    }, {
      name: 'Degenerate Case',
      data: [0.00, 0.00, 0.00, 0.00, 0.00, 0.00],
      pointPlacement: 'on'
    }]
  });
});

I was wondering whether such features are not available for polar charts (I wasn't able to read anything like that in the manual) or how to do that, in case I am doing something wrong. Thanks in advance!

4

2 回答 2

0

yAxismin属性是您正在寻找的吗？

http://jsfiddle.net/6EGeE/

yAxis: {
  gridLineInterpolation: 'polygon',
  lineWidth: 0,
  min: -1
},
于 2013-09-18T12:55:33.630 回答
0

您可以设置startOnTick: false并使minPadding: <0-1>一些空间低于零，例如：

于 2013-09-18T14:17:59.030 回答