01.html 1.19 KB
Newer Older
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
<!DOCTYPE HTML>
<html>

<head>
	<meta charset="UTF-8">
	<script>
		window.onload = function () {

			var chart = new CanvasJS.Chart("chartContainer", {
				theme: "light2", // "light1", "light2", "dark1", "dark2"
				exportEnabled: true,
				animationEnabled: true,
				title: {
					text: "Desktop Browser Market Share in 2016"
				},
				data: [{
					type: "pie",
					startAngle: 25,
					toolTipContent: "<b>{label}</b>: {y}%",
					showInLegend: "true",
					legendText: "{label}",
					indexLabelFontSize: 16,
					indexLabel: "{label} - {y}%",
					dataPoints: [{
							y: 51.08,
							label: "Chrome"
						},
						{
							y: 27.34,
							label: "Internet Explorer"
						},
						{
							y: 10.62,
							label: "Firefox"
						},
						{
							y: 5.02,
							label: "Microsoft Edge"
						},
						{
							y: 4.07,
							label: "Safari"
						},
						{
							y: 1.22,
							label: "Opera"
						},
						{
							y: 0.44,
							label: "Others"
						}
					]
				}]
			});
			chart.render();

		}
	</script>
</head>

<body>
	<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
	<script src="../../asset/js/canvasjs/canvasjs.min.js"></script>
</body>

</html>