Question

我正在尝试创建一个带有绘图带的蜘蛛图表，该绘图带在圆形边框的外边缘上运行。不幸的是，无论我尝试什么（yAxis max，yAxis maxPadding，plotBand thickness ....）（在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
        }]
    });
});

Answer 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/

Answer 2

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

Highcharts蜘蛛图填充问题

2 个答案: