SHOW:
|
|
- or go back to the newest paste.
| 1 | <!DOCTYPE html> | |
| 2 | <html><head> | |
| 3 | <title>PieChart</title> | |
| 4 | <meta charset= "utf-8" /> | |
| 5 | - | <script src="http://sertec-dev.sig.univ-nantes.prive/js/jquery-1.9.1.js></script> |
| 5 | + | <script src="http://sertec-dev.sig.univ-nantes.prive/js/jquery-1.9.1.js"></script> |
| 6 | <script src="http://sertec-dev.sig.univ-nantes.prive/js/highcharts.js"></script> | |
| 7 | <script src="http://sertec-dev.sig.univ-nantes.prive/js/modules/exporting.js"></script> | |
| 8 | ||
| 9 | ||
| 10 | <script> | |
| 11 | $(document).ready(function(){
| |
| 12 | $(function () {
| |
| 13 | ||
| 14 | $('#container').highcharts({
| |
| 15 | chart: {
| |
| 16 | plotBackgroundColor: null, | |
| 17 | plotBorderWidth: null, | |
| 18 | plotShadow: false | |
| 19 | }, | |
| 20 | title: {
| |
| 21 | text: 'Browser market shares at a specific website, 2010' | |
| 22 | }, | |
| 23 | tooltip: {
| |
| 24 | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
| |
| 25 | }, | |
| 26 | plotOptions: {
| |
| 27 | pie: {
| |
| 28 | allowPointSelect: true, | |
| 29 | cursor: 'pointer', | |
| 30 | dataLabels: {
| |
| 31 | enabled: true, | |
| 32 | color: '#000000', | |
| 33 | connectorColor: '#000000', | |
| 34 | format: '<b>{point.name}</b>: {point.percentage:.1f} %'
| |
| 35 | } | |
| 36 | } | |
| 37 | }, | |
| 38 | series: [{
| |
| 39 | type: 'pie', | |
| 40 | name: 'Browser share', | |
| 41 | data: [ | |
| 42 | ['Firefox', 45.0], | |
| 43 | ['IE', 26.8], | |
| 44 | {
| |
| 45 | name: 'Chrome', | |
| 46 | y: 12.8, | |
| 47 | sliced: true, | |
| 48 | selected: true | |
| 49 | }, | |
| 50 | ['Safari', 8.5], | |
| 51 | ['Opera', 6.2], | |
| 52 | ['Others', 0.7] | |
| 53 | ] | |
| 54 | }] | |
| 55 | }); | |
| 56 | }); | |
| 57 | }); | |
| 58 | ||
| 59 | </script> | |
| 60 | ||
| 61 | </head><body> | |
| 62 | <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> | |
| 63 | ||
| 64 | </body></html> |
