2013-10-27 122 views
1

我想爲每個餅圖的切片使用背景圖片。這是可能的高圖?我找不到爲每個切片指定背景圖像的選項。這裏有一個簡單的擺弄我放在一起:http://jsfiddle.net/3KyeL/(只是把這個位置的情況下,它使生活更輕鬆的人誰知道該怎麼做):HighCharts:餅圖需要背景圖片

$(function() { 
    $('#container').highcharts({ 
     credits: { 
      enabled: false 
     }, 
     title: { 
      align: 'center', 
      text: 'The Foo Bar', 
      style: { 
       color: '#9EA7B6' 
      }, 
      verticalAlign: 'bottom', 
      y: 15 // TODO: compute this 
     }, 
     tooltip: { 
      enabled: false 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        distance: -100, 
        enabled: true, 
        color: '#FFFFFF', 
        format: '<strong>{point.name}</strong>: {point.percentage:.1f} %' 
       }, 
       center: ['50%', '50%'] 
      } 
     }, 
     series: [{ 
      data: [{ 
       name: 'Foo', 
       y: 25 
      }, { 
       name: 'Bar', 
       y: 50 
      }, { 
       name: 'Foobar', 
       y: 25 
      }], 
      type: 'pie' 
     }] 
    }); 
}); 

回答

2

嘗試使用模式插件:http://www.highcharts.com/plugin-registry/single/9/Pattern-Fill

例如: http://jsfiddle.net/kVwGn/

<script src="https://rawgithub.com/highslide-software/pattern-fill/master/pattern-fill.js"></script> 

... 

series: [{ 
    type: 'pie', 
    data: [{ 
     y: 35, 
     color: { 
      pattern: 'http://highcharts.com/demo/gfx/pattern1.png', 
      width: 6, 
      height: 6 
     } 
    }, { 
     y: 15, 
     color: { 
      pattern: 'http://highcharts.com/demo/gfx/pattern2.png', 
      width: 6, 
      height: 6, 
      // VML only: 
      color1: 'red', 
      color2: 'yellow' 
     } 
    }] 
}] 
+1

好,我覺得自己像個白癡,我試圖讓該插件與餅圖工作,但缺少的是你可以指定一個這樣的顏色! – Mark