HighCharts组合图表

Question

我在高图JSFiddle中使用组合图表。超过某一点时，饼图会出现折线图并阻碍其可见性。

如何根据折线图的值动态地上/下饼图。

这是我的高楼代码。

$(function() { 
     $('#container').highcharts({ 
      chart: { 
      }, 
      title: { 
       text: 'Combination chart' 
      }, 
      xAxis: { 
       categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'] 
      }, 
      tooltip: { 
       formatter: function() { 
        var s; 
        if (this.point.name) { // the pie chart 
         s = ''+ 
          this.point.name +': '+ this.y +' fruits'; 
        } else { 
         s = ''+ 
          this.x +': '+ this.y; 
        } 
        return s; 
       } 
      }, 
      labels: { 
       items: [{ 
        html: 'Total fruit consumption', 
        style: { 
         left: '40px', 
         top: '8px', 
         color: 'black' 
        } 
       }] 
      }, 
      series: [{ 
       type: 'spline', 
       name: 'Average', 
       data: [3, 6, 3, 6.33, 3.33], 
       marker: { 
        lineWidth: 2, 
        lineColor: Highcharts.getOptions().colors[3], 
        fillColor: 'white' 
       } 
      }, { 
       type: 'pie', 
       name: 'Total consumption', 
       data: [{ 
        name: 'Jane', 
        y: 13, 
        color: Highcharts.getOptions().colors[0] // Jane's color 
       }, { 
        name: 'John', 
        y: 23, 
        color: Highcharts.getOptions().colors[1] // John's color 
       }, { 
        name: 'Joe', 
        y: 19, 
        color: Highcharts.getOptions().colors[2] // Joe's color 
       }], 
       center: [100, 80], 
       size: 100, 
       showInLegend: false, 
       dataLabels: { 
        enabled: false 
       } 
      }] 
     }); 
    }); 

我想要类似this的东西。你看到饼图和样条曲线没有冲突。但就我而言，样条曲线的值很高，饼图阻碍了样条的可见性。饼图应自动调整自己在样条上方或下方的某处。

我该怎么做？

Answer 1

我不认为有一种自动方式。您可能需要添加一些逻辑来根据绘制的数据设置统计图的中心和大小参数。

另一种方法是扩展y轴以腾出空间。您可以根据该所描绘的最大值加上足够的空间饼图计算这个

yAxis: { 
      max:10 
     }, 

http://jsfiddle.net/Y7GMr/