Highcharts - 防止饼图与折线图重叠？答案

【问题标题】：Highcharts - prevent pie chart from overlaping a line chart?Highcharts - 防止饼图与折线图重叠？
【发布时间】：2016-06-23 10:29:01
【问题描述】：

我有二合一图表，您可以在此处看到：

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

});

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

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

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

【问题讨论】：

嗨，我认为您可以使用 xAxis.min 和 xAxis.tickPositioner 来获取您想要的图表。在这里你可以看到一个例子：jsfiddle.net/8ankuh8s/1
完美！您能否将您的评论发布为答案，我会接受。
很高兴看到我的解决方案对您有用。我已将其发布为答案。

标签： javascript charts highcharts

【解决方案1】：

我认为对于您的图表，您可以使用 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/

最好的问候。

【讨论】：

您知道当类别较多时如何处理这种情况吗？例如。 jsfiddle.net/ynt0uj8g
如果您想动态改变图表的宽度，您可以在重绘事件回调函数中添加类似的功能。在这里你可以看到一个例子：jsfiddle.net/ynt0uj8g/5
你能解释一下chart.series[1].center属性到底是什么吗？我在 API 文档中找不到任何内容。 ://
您可以在这里api.highcharts.com/highcharts#plotOptions.pie.center找到有关中心的信息。我使用的参数几乎相同，但它是一个内部的Highcharts参数。您可以在 Highcharts 代码中找到有关它的信息，寻找 getCenter 方法。