Highcharts - 防止饼图重叠折线图?

时间:2016-06-23 10:29:01

标签: javascript charts highcharts

我有二合一图表,你可以在这里看到:

http://jsfiddle.net/8ankuh8s/

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

});

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

我想实现以下结果(模拟):

enter image description here

我尝试使用offset上的xAxis参数执行此操作,但它没有按预期工作。

1 个答案:

答案 0 :(得分:2)

我认为在你的图表中你可以使用xAxis.min和xAxis.tickPositioner。您可以在API中找到有关它们的信息: http://api.highcharts.com/highcharts#xAxis.min http://api.highcharts.com/highcharts#xAxis.tickPositioner

您可以使用它们在xAxis上移动类别。在这里,您可以找到可以帮助您的代码:

    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
  }
},

使用此功能,我将仅在xAxis上显示您的类别,但它们将使用xAxis.min参数进行移位。

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

最好的问候。