wangtao
/
fireInternet


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Highcharts Example</title>

		<style type="text/css">
#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

caption {
	padding-bottom: 5px;
	font-family: 'Verdana';
	font-size: 14pt;
	font-weight: bold;
	color:#555555;
}

table {
	font-family: 'Verdana';
	font-size: 12pt;
	color:#555555;              
	border-collapse: collapse;
	border: 3px solid #CCCCCC;
	margin: 2px auto;	
}

tr {
  	border-bottom: 2px solid #EEEEEE;
}

th {
	border-left: 2px solid #EEEEEE;
	border-right: 2px solid #EEEEEE;
	padding: 12px 15px;
	border-collapse: collapse;
}

th[scope="col"] {
	background-color: #ffffee;
}

th[scope="row"] {
	background-color: #f0fcff;
	text-align:left;
}

td {
  	border-left: 2px solid #EEEEEE;
  	border-right: 2px solid #EEEEEE;
  	padding: 12px 15px;
  	border-collapse: collapse;
}
		</style>
	</head>
	<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/export-data.js"></script>
<script src="../../code/modules/accessibility.js"></script>
<script src="../../code/modules/pattern-fill.js"></script>
<div id="container"></div>


		<script type="text/javascript">


Highcharts.chart('container', {
    chart: {
        type: 'pie',
        description: 'Most commonly used desktop screen readers in July 2015 as reported in the Webaim Survey. Shown as percentage of respondents. JAWS is by far the most used screen reader, with 30% of respondents using it. ZoomText and Window-Eyes follow, each with around 20% usage.'
    },

    title: {
        text: 'Desktop screen readers'
    },

    subtitle: {
        text: 'Click on point to visit official website'
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                connectorColor: Highcharts.getOptions().colors[0],
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            },
            point: {
                events: {
                    click: function () {
                        window.location.href = this.website;
                    }
                }
            },
            cursor: 'pointer'
        }
    },

    series: [{
        name: 'Percentage usage',
        borderColor: Highcharts.getOptions().colors[0],
        data: [{
            name: 'JAWS',
            y: 30.2,
            website: 'https://www.freedomscientific.com/Products/Blindness/JAWS',
            color: 'url(#highcharts-default-pattern-0)',
            description: 'This is the most used desktop screen reader'
        }, {
            name: 'ZoomText',
            y: 22.2,
            website: 'http://www.zoomtext.com/products/zoomtext-magnifierreader',
            color: 'url(#highcharts-default-pattern-1)'
        }, {
            name: 'Window-Eyes',
            y: 20.7,
            website: 'http://www.gwmicro.com/window-eyes',
            color: 'url(#highcharts-default-pattern-2)'
        }, {
            name: 'NVDA',
            y: 14.6,
            website: 'https://www.nvaccess.org',
            color: 'url(#highcharts-default-pattern-4)'
        }, {
            name: 'VoiceOver',
            y: 7.6,
            website: 'http://www.apple.com/accessibility/osx/voiceover',
            color: 'url(#highcharts-default-pattern-3)'
        }, {
            name: 'System Access To Go',
            y: 1.5,
            website: 'https://www.satogo.com',
            color: 'url(#highcharts-default-pattern-7)'
        }, {
            name: 'ChromeVox',
            y: 0.3,
            website: 'http://www.chromevox.com',
            color: 'url(#highcharts-default-pattern-6)'
        }, {
            name: 'Other',
            y: 2.9,
            website: 'http://www.disabled-world.com/assistivedevices/computer/screen-readers.php',
            color: 'url(#highcharts-default-pattern-5)'
        }]
    }]
});

		</script>
	</body>
</html>