使用highcharts画饼图

okgoes 2023-05-09 13:07:18
Categories: Tags:
  1. 引入jquery

  2. 引入highcharts

note:注意引用的顺序

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
<div class='container_charts'></div>
``````javascript
function pie(title, seriesTitle, data) {
    $('.container_charts').highcharts({
        chart: {
        type: 'pie',
        options3d: {
        enabled: true,
        alpha: 45,
        beta: 0
        }
        },
        title: {
        text: title
        },
        tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
        },
        colors:['#00A600', '#AAAAFF', '#FF2D2D'] ,
        plotOptions: {
        pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        depth: 35,
        dataLabels: {
        enabled: true,
        format: '{point.name}:{point.y:.2f}元, {point.percentage:.2f}%'
        },
        showInLegend: true
        }
        },
        series: [{
        type: 'pie',
        name: seriesTitle,
        data: data
        }]
    });
}
var data = [
    ['a',   10],
    ['b',   11],
    {
    name: 'c',
    y: 12,
    sliced: true,
    selected: true
    }
];
pie('测试', '测试系列标题', data);