如何在 ionic 2 中使用高图表渲染 html

Question

我已经尝试这样做，但无法设置位置，如示例中所示，我想用 ionic 2 做什么。

小提琴示例

我在我的导出类中尝试的是这个：

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

我自己解决了将这些事件添加到加载和重绘以调整大小事件：-

网页部分

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