Highcharts组合图形重叠在一起

我想实现一个组合图形与 1.饼图 2列“正常” 3.脊柱Highcharts组合图形重叠在一起

现在我的问题是，如果列值大，其重叠饼图不使伟大的观看，我在JS Fiddle sample

$(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' 
       } 
      }] 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal' 
      } 
     }, 
     series: [{ 
      type: 'column', 
      name: 'Jane', 
      data: [9, 9, 1, 3, 4] 
     }, { 
      type: 'column', 
      name: 'John', 
      data: [2, 9, 5, 7, 6] 
     }, { 
      type: 'column', 
      name: 'Joe', 
      data: [4, 3, 3, 9, 0] 
     }, { 
      type: 'spline', 
      name: 'Average', 
      data: [3, 2.67, 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: [20, 80], 
      size: 100, 
      showInLegend: false, 
      dataLabels: { 
       enabled: false 
      } 
     }] 
    }); 
});

样品，请给我如何解决这个有些淡淡的，想到的一件事是设置X范围更大然后的最大值列但不知道如何做到这一点。

来源

2013-12-17 Hemant.Gupta

我使用asp.net和该图将在本质上是动态的，所以我需要一个解决方案是动态的是大自然。 –

'yAxis：{max：40 //我们需要对它进行独立设置......需要更准确的方法来做到这一点}如果使用它，它可以正常工作，但有没有更好的方法？ –

你可以尝试设置maxPadding: 0.5或一些更高的价值，请参阅：http://jsfiddle.net/ykgNR/1/

来源

2013-12-17 12:33:31

谢谢@Pawel这对我来说非常好...很好的解决方案。 –

仅供参考我使用1，因为它最适合我的需求。 –

我建议你使用两个单独的图表。

一个用于饼图，另一个用于组合线和列。

是否有任何强制要求您在同一图表部分显示组合图表和饼图？

来源

2013-12-17 05:19:12 Strikers

是@strikers它是一种强迫，因为客户希望这样，这是阻止我实施它的唯一因素，客户喜欢它，所以我不能废除它。 –

那么你只能做一件事情动态设置yAxis的最大值，这取决于饼图占用的高度 – Strikers

据我所知，但由于数值是动态的...它可能是最大值为20的条形图或在2000的情况下，所以如何我计算最大值？任何想法将不胜感激。 –

Highcharts组合图形重叠在一起

回答

相关问题