如何渲染HTML highcharts離子2

Question

我試圖做到這一點，但不會能夠設置位置，如圖的例子我想與離子2.

fiddle example

做什麼，我試圖爲這在我出口類：

this.chart1 = { 
     chart: { 
     type: 'pie', 
     }, 
     series: [{ 
     data: [14,14], 
     size: '100%', 
     innerSize: '95%', 
     }, 
     { 
      data: [21,7], 
      size: '82%', 
      innerSize: '95%', 

     }] 
    }, function(chart1) { 
     var renderer = chart1.renderer, 
      series1 = chart1.series[0], 
      series2 = chart1.series[1], 
      r1 = series1.points[0].shapeArgs.r, 
      r2 = series2.points[0].shapeArgs.innerR, 
      center = series1.center; 

     console.log(series1); 

     [0, 90, 180, 270].forEach(angle => { 
      var rad = angle * Math.PI/180; 
      var path = renderer.path([ 
       'M', 
       center[0] + r2 * Math.cos(rad), 
       center[1] + r2 * Math.sin(rad), 
       'L', 
       center[0] + r1 * Math.cos(rad), 
       center[1] + r1 * Math.sin(rad) 
      ]).attr({ 
       'stroke-width': 4, 
       stroke: 'grey' 
      }).add(series2.group); 
     }) 

    }; 

Answer 1

我解決它在我自己 添加這些事件加載和重繪調整大小事件： -

HTML部分

<chart [options]="chart1" class="highchart_container charthigh" (load)="saveChart($event.context)" (redraw)="saveChart($event.context)"> </chart> 

出口類部分

constructor(public navCtrl: NavController) { 
     this.chart1 = { 
      chart: { 
      type: 'pie',   
      }, 
      title : 'test', 
      plotOptions: { 
      pie: { 
       shadow: false, 
       center: ['50%', '50%'], 
       size:'250' 
      } 
      }, 
      series: [{ 
      data: [14,14], 
      size: '100%', 
      innerSize: '95%',   
      }, 
      { 
       data: [21,7], 
       size: '82%', 
       innerSize: '95%', 
      }] 
     }; 
    } 
chart1: Object; 
    saveChart(chart1) { 
/*here on chart1 object you get its position and set the html by using jquery below is my chart center points*/ 
var textX1 = chart1.plotLeft + (chart1.plotWidth * 0.5); 
     var textY1 = chart1.plotTop + (chart1.plotHeight * 0.5) + $('.weeks-check-box').height(); 
}