https://ariteknokent.com.tr/assets/js/highcharts/init.js

1$(document).ready(function() {
2
3
4$.fn.highchartsSector = function() {
5
6    var labelOne = $(this).attr('data-labelOne');
7    var labelTwo = $(this).attr('data-labelTwo');
8    var labelThree = $(this).attr('data-labelThree');
9    var dataSeries = $(this).attr('data-series');
10
11    $(this).highcharts({
12        chart: {
13            spacingBottom: 0, spacingTop: 0, spacingLeft: -5, spacingRight: -5,
14            polar: true,
15            type: 'area',
16            events:
17            {
18                load: function(event) {
19                    var chart = this;
20                    var label1, label2, label3, label2xPosition, label3xPosition, upDownIconPosition;
21
22                    this.renderer.image(getroot + '/assets/js/highcharts/img/bg.png', 0, 0, '100%', '100%').add();
23
24                    label1 = this['renderer']['label'](labelOne)
25                    .css({'color' : '#fff', 'fontSize':'22px', 'opacity': '0'})
26                    .addClass('chartlabel').add().toFront();
27
28                    label2 = this['renderer']['label'](labelTwo)
29                    .css({'color' : '#fff', 'fontSize':'26px', 'opacity': '0'})
30                    .addClass('chartlabel').add().toFront();
31
32                    label3 = this['renderer']['label'](labelThree)
33                    .css({'color' : '#fff', 'fontSize':'12px', 'opacity': '0'})
34                    .addClass('chartlabel').add().toFront();
35
36                    label2xPosition = (label2.width * -1) - 15;
37                    label3xPosition = (label3.width * -1) - 17;
38                    upDownIconPosition = $('#chart1').innerWidth() - Math.round(label2.width) - 18 - 10;
39
40                    $(window).resize(function() {
41                        $('.chartlabel-updown').css({'display':'none !important'}).remove();
42                        chart.renderer.image.remove();
43                        // $('image[x="'+upDownIconPosition+'"]').remove() ;
44                        upDownIconPosition = $('#chart1').innerWidth() - Math.round(label2.width) - 18 - 10;
45                        chart.renderer.image(getroot + '/assets/js/highcharts/img/up.png', upDownIconPosition, 90, 18, 11).addClass('chartlabel').addClass('chartlabel-updown').add().toFront();  // add image(url, x, y, w, h)
46                    });
47
48                    this.renderer.image(getroot + '/assets/js/highcharts/img/up.png', upDownIconPosition, 90, 18, 11).css({'opacity':'0'}).addClass('chartlabel').addClass('chartlabel-updown').add().toFront();  // add image(url, x, y, w, h)
49
50                    label1.align(Highcharts.extend(['label']['getBBox()'], {'align': 'left', 'x': 15, 'verticalAlign': 'top', 'y': 10 }), null, 'spacingBox');
51                    label2.align(Highcharts.extend(['label']['getBBox()'], {'align': 'right', 'x': label2xPosition, 'verticalAlign': 'top', 'y': 75 }), null, 'spacingBox');
52                    label3.align(Highcharts.extend(['label']['getBBox()'], {'align': 'right', 'x': label3xPosition, 'verticalAlign': 'top', 'y': 105 }), null, 'spacingBox');
53                }
54            }
55        },
56        title: {text : ''},
57        xAxis: { gridLineWidth: 0, minorGridLineWidth: 0, minorTickLength: 0, tickLength: 0, lineColor: 'transparent', labels: {enabled: false} },
58        credits: {enabled: false},
59        yAxis: { gridLineWidth: 0, minorGridLineWidth: 0, title: {text: ''}, labels: {enabled: false} },
60        tooltip: {enabled: false},
61        plotOptions: {
62            area: {
63                marker: {
64                    enabled: false,
65                    states: {
66                        hover: {
67                            enabled: false
68                        }
69                    }
70                }
71            },
72            series: {
73                animation: {
74                    duration: 1000,
75                    complete: function () {
76                        $('.chartlabel').animate({'opacity':'1'}, 1500);
77                    }
78                },
79                color: '#AFD6FF',
80                fillColor: {
81                    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
82                    stops: [
83                        [0, 'rgba(46, 131, 214, 0.7)'],
84                        [1, 'rgba(46, 111, 174, 0.7)']
85                    ]
86                }
87            }
88        },
89        series: [{
90            showInLegend: false,
91            lineWidth: 5,
92            data: $.map(dataSeries.split(', '), function(val) { return parseInt(val); })
93        }]
94    });
95} // function stop
96
97    $('.res-title1').appear();
98    $('.res-title1').on('appear', function(event, $all_appeared_elements) {
99
100        $('#charts1').animate({ opacity: 1, marginTop:'0'}, { duration: 400, queue: false, complete: function () { $('#chart1').highchartsSector(); } } );
101        $('#charts2').animate({ opacity: 1, marginTop:'0'}, { duration: 600, queue: false, complete: function () { $('#chart2').highchartsSector(); } } );
102        $('#charts3').animate({ opacity: 1, marginTop:'0'}

102, { duration: 800, queue: false, complete: function () { $('#chart3').highchartsSector(); } } );
103
104        setTimeout(function() {
105
106            $('#charts4').animate({ opacity: 1, marginTop:'0'}, { duration: 400, queue: false, complete: function () { $('#chart4').highchartsSector(); } } );
107            $('#charts5').animate({ opacity: 1, marginTop:'0'}, { duration: 600, queue: false, complete: function () { $('#chart5').highchartsSector(); } } );
108            $('#charts6').animate({ opacity: 1, marginTop:'0'}, { duration: 800, queue: false, complete: function () { $('#chart6').highchartsSector(); } } );
109
110        }, 800);
111
112
113        $(this).off('appear');
114    }); // appear close
115
116
117}); // jquery close