Question

这是我的代码，我正在尝试创建饼图高清图，在查看加载后我想设置在饼图中心设置的离子幻灯片。还希望动态地按照高图的位置显示一些html元素。

我附上了图像，其中有一些html元素围绕我要放置的图形圆圈。我之前使用ionic1做过这个，但是无法调用ionic2中的函数。

IONIC 2代码

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import * as Highcharts from 'highcharts';
import * as HighchartsMore from 'highcharts/highcharts-more';
import * as $ from 'jquery';



HighchartsMore(Highcharts);

@Component({
  selector: 'page-challengedash',
  templateUrl: 'challengedash.html',
  styles: [`
    chart {
        display: block;
        width: auto; // tell the chart to fill 100% of the height of the 'c' container
    }
`]
})
export class ChallengedashPage {



  constructor(public navCtrl: NavController) {




    /*high chart options*/
    this.chart1 = {
      chart: {
        type: 'pie',
        backgroundColor:'',
      },
      credits: {
        enabled: false
      },
      title : '',
      exporting: {
        enabled: false
      },
      plotOptions: {
        pie: {
          shadow: false,
          center: ['50%', '50%']
        }
      },
      tooltip: {
        enabled: false,
        valueSuffix: '%'
      },
      series: [{
        data: [14,14],
        size: '100%',
        innerSize: '95%',
        colors: ['#ff3300', 'rgba(255, 51, 0, 0.2)'],
        borderColor: '',
        borderRadius: 0,
        borderWidth: 0,
        animation: false,
        enableMouseTracking:false,
        dataLabels: {
          enabled: false,
          style: {
            fontWeight: 'bold'
          }
        }
      },
        {
          data: [21,7],
          size: '82%',
          innerSize: '95%',
          colors: ['#00ccff', 'rgba(0, 204, 255, 0.2)'],
          borderColor: '',
          borderRadius: 0,
          borderWidth: 0,
          animation: false,
          shadow: false,
          enableMouseTracking:false,
          dataLabels: {
            enabled: false,
            style: {
              fontWeight: 'bold'
            }
          }
        }]
    };
 };


  chart1: Object;

    ionViewDidEnter() {

           var chart1 = $('.highchart_container');

           var textX1 = chart1.plotLeft + (chart1.plotWidth  * 0.5);
           var textY1 = chart1.plotTop  + (chart1.plotHeight * 0.5);

           var span = $('.container1 div.pieChartInfoText');
           span.css('left', textX1 + (span.width() * -0.5));
           span.css('top', textY1 + (span.height() * -0.5));

           var spantop = $('.container1 div.pieChartInfotop');
           spantop.css('left', textX1 + (spantop.width() * 0));
           spantop.css('top', textY1 + (spantop.height() * -4.65));

           var spanright = $('.container1 div.pieChartInforight');
           spanright.css('left', textX1 + (spanright.width() * 3.7));
           spanright.css('top', textY1 + (spanright.height() * 0));

           var spanrighttext = $('.container1 div.pieChartInforighttext');
           spanrighttext.css('left', textX1 + (spanrighttext.width() * 2.5));
           spanrighttext.css('top', textY1 + (spanrighttext.height() * -0.45));

           var spanbottom = $('.container1 div.pieChartInfobottom');
           spanbottom.css('left', textX1 + (spanbottom.width() * 0));
           spanbottom.css('top', textY1 + (spanbottom.height() * 3.69));

           var spanleft = $('.container1 div.pieChartInfoleft');
           spanleft.css('left', textX1 + (spanleft.width() * -4.7));
           spanleft.css('top', textY1 + (spanleft.height() * 0));

           var spanlefttext = $('.container1 div.pieChartInfolefttext');
           spanlefttext.css('left', textX1 + (spanlefttext.width() * -3.5));
           spanlefttext.css('top', textY1 + (spanlefttext.height() * -0.45));

           var spanrightinfobar = $('.container1 div.pieChartInfoBar');
           spanrightinfobar.css('left', textX1 + (spanrightinfobar.width() * 4.3));
           spanrightinfobar.css('top', textY1 + (spanrightinfobar.height() * -5.5));

           var spanrightsocial = $('.container1 div.pieChartSocialImage');
           spanrightsocial.css('left', textX1 + (spanrightsocial.width() * 2.48));
           spanrightsocial.css('top', textY1 + (spanrightsocial.height() * -2.41));

           var spancurrentday = $('.container1 div.pieChartInfocurrentdaytext');
           spancurrentday.css('left', textX1 + (spancurrentday.width() * -0.5));
           spancurrentday.css('top', textY1 + (spancurrentday.height() * 5.3));

           var spanrighttext0 = $('.background-overlay-trans div.pieChartInforighttext');
           spanrighttext0.css('left', textX1 + (spanrighttext0.width() * 0.42));
           spanrighttext0.css('top', textY1 + (spanrighttext0.height() * 0.45));

           var spanlefttext0 = $('.background-overlay-trans div.pieChartInfolefttext');
           spanlefttext0.css('left', textX1 + (spanlefttext0.width() * -1.31));
           spanlefttext0.css('top', textY1 + (spanlefttext0.height() * 5.12));
  }
}

---------这里更新了代码------------------- ionic1代码，我使用下面的代码

function initialize() {

        categories = [],
        data = [{
            drilldown: {
                name: 'Days',
                categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28],
                data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28],

            }
            }],
        browserData = [10,18];
        versionsData = [21,7];

    // Create the chart
    var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'pie',
                backgroundColor:'',
                events: {
                        load: function (event)
                        {
                            var slidebottom = $('#bottom-swipe-box');
                            topswipebox = $('.top-swipe-box');
                            headercustomdash = $('.header-custom-dash div.row');
                            slidebottom.css('top',topswipebox.outerHeight()+headercustomdash.height());
                    }
                },    
            },
            credits: {
                  enabled: false
              },
            title : '',
            exporting: { 
                enabled: false 
            },
            plotOptions: {
                pie: {
                    shadow: false,
                    center: ['50%', '50%']
                }
            },
            tooltip: {
                enabled: false,
                valueSuffix: '%'
            },
            series: [{
                data: browserData,
                size: '100%',
                innerSize: '95%',
                colors: ['#ff3300', 'rgba(255, 51, 0, 0.2)'],
                borderColor: '',
                borderRadius: 0,
                borderWidth: 0,
                animation: false,
                enableMouseTracking:false,
                dataLabels: {
                    enabled: false,
                    style: {
                        fontWeight: 'bold'
                    }
                }
            },
             {
                data: versionsData,
                size: '82%',
                innerSize: '95%',
                colors: ['#00ccff', 'rgba(0, 204, 255, 0.2)'],
                borderColor: '',
                borderRadius: 0,
                borderWidth: 0,
                animation: false,
                shadow: false,
                enableMouseTracking:false,
                dataLabels: {
                    enabled: false,
                    style: {
                        fontWeight: 'bold'
                    }
                }
            },
            {
                data: versionsData,
                size: '78%',
                innerSize: '0%',
                colors: ['rgba(1, 180, 212, 0.2)'],
                borderColor: '',
                borderRadius: 0,
                borderWidth: 0,
                animation: false,
                shadow: false,
                enableMouseTracking:false,
                dataLabels: {
                    enabled: false,
                    style: {
                        fontWeight: 'bold'
                    }
                }
            }]
        },
        function(chart) { // on complete
            var textX = chart.plotLeft + (chart.plotWidth  * 0.5);
            var textY = chart.plotTop  + (chart.plotHeight * 0.5);


            span0 = $('.container0 div.pieChartInfoText');
            span0.css('left', textX + (span0.width() * -0.5));
            span0.css('top', textY + (span0.height() * -0.5));

            spantop0 = $('.container0 div.pieChartInfotop');
            spantop0.css('left', textX + (spantop0.width() * 0));
            spantop0.css('top', textY + (spantop0.height() * -4.65));

            spanright0 = $('.container0 div.pieChartInforight');
            spanright0.css('left', textX + (spanright0.width() * 3.7));
            spanright0.css('top', textY + (spanright0.height() * 0));

            spanrighttext0 = $('.container0 div.pieChartInforighttext');
            spanrighttext0.css('left', textX + (spanrighttext0.width() * 2.5));
            spanrighttext0.css('top', textY + (spanrighttext0.height() * -0.45));

            spanbottom0 = $('.container0 div.pieChartInfobottom');
            spanbottom0.css('left', textX + (spanbottom0.width() * 0));
            spanbottom0.css('top', textY + (spanbottom0.height() * 3.69));

            spanleft0 = $('.container0 div.pieChartInfoleft');
            spanleft0.css('left', textX + (spanleft0.width() * -4.7));
            spanleft0.css('top', textY + (spanleft0.height() * 0));

            spanlefttext0 = $('.container0 div.pieChartInfolefttext');
            spanlefttext0.css('left', textX + (spanlefttext0.width() * -3.5));
            spanlefttext0.css('top', textY + (spanlefttext0.height() * -0.45));

            spanrightinfobar0 = $('.container0 div.pieChartInfoBar');
            spanrightinfobar0.css('left', textX + (spanrightinfobar0.width() * 4.3));
            spanrightinfobar0.css('top', textY + (spanrightinfobar0.height() * -5.5));

            spanrightsocial0 = $('.container0 div.pieChartSocialImage');
            spanrightsocial0.css('left', textX + (spanrightsocial0.width() * 2.48));
            spanrightsocial0.css('top', textY + (spanrightsocial0.height() * -2.41));

            spancurrentday0 = $('.container0 div.pieChartInfocurrentdaytext');
            spancurrentday0.css('left', textX + (spancurrentday0.width() * 1.8));
            spancurrentday0.css('top', textY + (spancurrentday0.height() * 3.3));

            var heights = $("div.slider_box_bottom").map(function ()
            {
                return $(this).height();
            }).get(),
                maxHeight = Math.max.apply(null, heights);
            $("div.slider_box_bottom").css('height',maxHeight);

        });

其中，pieChartInfo .....这么多的类是html元素，我没有把它放在代码bcz中这么多..

主要是我想通过ionic2完成这项工作，如果我将代码设置为显示为ionic1

需要在高度图的中心显示离子滑片

0 个答案: