예제)

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
function(chartData) {
    Highcharts.chart('monitoringDonutChart', {
        credits: {
            enabled: false,
            position: {
                align: 'center',
                verticalAlign: 'middle'
            }
        },
        chart: {
            height: 250,
            width: 300,
            marginTop:  null,
            margin: null,
            animation: true,
            events: {
                load: function() {
                    var chart = this,
                    value = 0;
                    chart.series[0].yData.forEach(function(point, index) {
                        if(index == 0){
                            value += point;
                        }
                    });
                    
                    //파이챠트 중간에 텍스트 추가 후 상,하 센터정렬
                    chart.renderer.text(value, nullnull, chart.resetZoom, {
                        }).attr({
                           align: 'center',
                           verticalAlign: 'middle'
                        }).add().css({fontSize: '20px'}).align({
                           align: 'center',
                           verticalAlign: 'middle',
                           x: 0,
                           y: 0
                        }, falsenull);
                    
                }
            }
        },
        title: { 
            enabled: false,
            useHTML:true,
            text: null,
            verticalAlign: 'bottom'
        },
        plotOptions: {
            pie: {
                dataLabels: {
                    enabled: false
                },
                animation: false,
                showInLegend: true
            },
        },
        legend: {
            enabled: false
        },
        series: [{
            name'사용량',
            type: 'pie',
            innerSize: '75%',
            colors: ['#ffcc00''#c0c0c0'],
            data: chartData
        }, ],
    });
}
cs

 

참고)

- 도넛형태 : stackoverflow.com/questions/54434360/aligning-labels-in-highchart-donut

 

Aligning labels in highchart donut

I'm trying to make a highchart donut with a legend on the side, I'm really struggling to get the data labels to be more centered. At the moment each of them are in a different place, an image of

stackoverflow.com

- 중간에 텍스트삽입 : stackoverflow.com/questions/38072913/how-to-add-text-via-chart-renderer-text-in-highcharts

 

How to add text via chart.renderer.text in Highcharts?

I have succeeded adding additional text to my charts, like here. This, I achieved through adding a "function(chart)" to my "var chart = new Highcharts.Chart" $.get('xxx.csv', function(data) { ...

stackoverflow.com

 

- 가운데 정렬 : stackoverflow.com/questions/22310677/add-buttons-in-chart-of-highcharts-at-runtime

 

Add buttons in chart of Highcharts at runtime

I need to add some custom buttons (with onclick events), without overwrite the exporting buttons value, 'cause I wanna include new buttons without lost the custom buttons previously defined in cha...

stackoverflow.com

 

 

Posted by 셋부터넷
,