Question

我正在使用Highcharts.com来创建蜘蛛图表。我的数据被标准化（系列中的每个值都在[0.0,1.0]范围内）。可能会发生这样的情况：对于给定的折线，一些/所有值都精确为0.0：这使得部分或全部折线在一条线或甚至一个点中退化。请参阅以下最小工作示例（我发布了一张图片，但我还不允许）：我指的是Degenerate Case（第三行）。例如，我希望移动每个轴，使其显示[-0.15,1.0]范围内的值，这样即使在最坏的情况下，我也有一个合适的区域。这将大大提高图形的可读性。在阅读在线手册后，我尝试了offset，padding等几种组合（包括最小值和最大值），这些组合建议以某种方式提供帮助，但我没有成功。

$(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'
    }]
  });
});

我想知道这些功能是否不适用于极地图表（我无法阅读手册中的任何内容）或如何做到这一点，以防我做错了。提前谢谢！

Answer 1

min yAxis属性是您要找的吗？

http://jsfiddle.net/6EGeE/

yAxis: {
  gridLineInterpolation: 'polygon',
  lineWidth: 0,
  min: -1
},

Answer 2

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

minPadding：0.1 =＆gt; http://jsfiddle.net/6EGeE/1/
minPadding：0.5 =＆gt; http://jsfiddle.net/6EGeE/4/

使用Highcharts在极坐标图表中允许一些填充空间

2 个答案: