0

我正在尝试创建一个带有绘图带的蜘蛛图，该绘图带紧靠圆形边框的外边缘。不幸的是，无论我尝试什么（yAxis max、yAxis maxPadding、plotBand 厚度......）（在 Firefox 和 Chrome 中测试），最终都会在 yAxis max 和图表边缘之间出现一些空白。我在我的实际应用程序中创建了一个靶心图案，除了空白之外看起来很好。

编辑：问题不在于我不能填写这个空白（如果我只是将 plotBand 端增加到 yAxis.max 之外，我可以。问题是这个区域完全存在——我也希望最后一点上升到图表的边缘，因此内部绘图带不会按比例缩小。

在这个例子中，圆圈中间还有空格——没关系。 http://jsfiddle.net/XEte8/

html:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="height: 400px"></div>

javascript:

$(function () {
    $('#container').highcharts({
        chart: {
            polar:true
        },
        yAxis: {        
            plotBands: [{ // mark the weekend
                color: '#FCFFC5',
                from: 0,
                to: 250,
            }],
            max:250,
            endOnTick:true,
            maxPadding:0,
            minPadding:0,
            startOnTick:true,
            tickmarkPlacement:"on"
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 24 * 3600 * 1000
        }]
    });
});
4

2 回答 2

1

您需要的是配置tickInterval

javascript:

$(function () {
  $('#container').highcharts({
    chart: {
        polar:true,
        marginTop: 10
    },
    yAxis: {        
        plotBands: [{ // mark the weekend
            color: '#FCFFC5',
            from: 100,
            to: 250,
        }],
        max:250,
        tickInterval: 50,       
        startOnTick:true,
        tickmarkPlacement:"on"
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000
    }]
  });
});

jsfiddle：http: //jsfiddle.net/Ng3s5/

于 2013-10-14T21:41:24.553 回答
0

如果endOnTick选项为真，max有时会被四舍五入。我更新了你的小提琴：http endOnTick:false:
//jsfiddle.net/XEte8/1/

于 2013-10-14T21:30:27.717 回答