Highcharts - 防止饼图覆盖折线图？

我有两个功能于一身的图表，你可以在这里看到：Highcharts - 防止饼图覆盖折线图？

$('#container').highcharts({ 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
     tickInterval: 1, 
     tickmarkPlacement: "on", 
     startOnTick: true, 
     endOnTick: true, 
     minPadding: 0, 
     maxPadding: 0, 
     offset: 0 
    }, 

    series: [{ 
     data: [190.9, 180.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
    }, { 
     type: 'pie', 
     data: [29.9, 71.5, 150], 
     center: [50, 40], 
     dataLabels: { 
      enabled: false 
     }, 
     size: 100 
    }] 
});

}）;

您会看到饼图与折线图重叠。

我想达到以下结果（模拟）：

我试着用xAxis参数offset要做到这一点，但预计它不工作。

来源

2016-06-23 vitozev

嗨，我认为你可以例如使用xAxis.min和xAxis.tickPositioner获取你想要的图表。在这里你可以看到一个例子它如何工作：http://jsfiddle.net/8ankuh8s/1/ –

完美！你可以发表你的评论作为答案，我会接受它。 – vitozev

很高兴看到我的解决方案为您工作。我已经发布它作为答案。 –

我认为，如果您的图表可以使用xAxis.min和xAxis.tickPositioner。你可以找到关于他们的信息的内部API： http://api.highcharts.com/highcharts#xAxis.min http://api.highcharts.com/highcharts#xAxis.tickPositioner

你可以用它们来移动你的类别上的x轴。在这里，你可以找到的代码，可以帮助你：

xAxis: { 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
    tickmarkPlacement: "on", 
    minPadding: 0, 
    maxPadding: 0, 
    min: -5, 
    tickPositioner: function() { 
    var positions = []; 
    for (var i = 0; i < this.categories.length; i++) { 
     positions.push(i) 
    } 
    return positions 
    } 
},

有了这个功能，我将只显示你在x轴的类别，但是它们会用xAxis.min参数移位。

在这里你可以找到一个例子是如何工作的： http://jsfiddle.net/8ankuh8s/2/

最好的问候。

来源

2016-06-23 11:18:32

当有更多类别时，您是否有任何想法如何处理案例？例如。 http://jsfiddle.net/ynt0uj8g/ – vitozev

请看这个jsFiddle更多类别：http://jsfiddle.net/ynt0uj8g/2/ –

你是男人！感谢:) – vitozev

Highcharts - 防止饼图覆盖折线图？

回答

相关问题