Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
875 lars 1 
<!DOCTYPE HTML>
2 
<html>
3 
	<head>
4 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
		<title>Highcharts Example</title>
6 
 
7 
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
8 
		<style type="text/css">
9 
${demo.css}
10 
		</style>
11 
		<script type="text/javascript">
12 
$(function () {
13 
 
14 
    // Make monochrome colors and set them as default for all pies
15 
    Highcharts.getOptions().plotOptions.pie.colors = (function () {
16 
        var colors = [],
17 
            base = Highcharts.getOptions().colors[0],
18 
            i;
19 
 
20 
        for (i = 0; i < 10; i += 1) {
21 
            // Start out with a darkened base color (negative brighten), and end
22 
            // up with a much brighter color
23 
            colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
24 
        }
25 
        return colors;
26 
    }());
27 
 
28 
    // Build the chart
29 
    $('#container').highcharts({
30 
        chart: {
31 
            plotBackgroundColor: null,
32 
            plotBorderWidth: null,
33 
            plotShadow: false,
34 
            type: 'pie'
35 
        },
36 
        title: {
37 
            text: 'Browser market shares at a specific website, 2014'
38 
        },
39 
        tooltip: {
40 
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
41 
        },
42 
        plotOptions: {
43 
            pie: {
44 
                allowPointSelect: true,
45 
                cursor: 'pointer',
46 
                dataLabels: {
47 
                    enabled: true,
48 
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
49 
                    style: {
50 
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
51 
                    }
52 
                }
53 
            }
54 
        },
55 
        series: [{
56 
            name: "Brands",
57 
            data: [
58 
                {name: "Microsoft Internet Explorer", y: 56.33},
59 
                {name: "Chrome", y: 24.03},
60 
                {name: "Firefox", y: 10.38},
61 
                {name: "Safari", y: 4.77},
62 
                {name: "Opera", y: 0.91},
63 
                {name: "Proprietary or Undetectable", y: 0.2}
64 
            ]
65 
        }]
66 
    });
67 
});
68 
		</script>
69 
	</head>
70 
	<body>
71 
<script src="../../js/highcharts.js"></script>
72 
<script src="../../js/modules/exporting.js"></script>
73 
 
74 
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
75 
 
76 
	</body>
77 
</html>