1

<script src="Chart.js"></script>

1

<canvas id="myChart" width="400" height="400"></canvas>

1

2

3

//Get the context of the canvas element we want to select

var ctx = document.getElementById("myChart").getContext("2d");

var myNewChart = new Chart(ctx).PolarArea(data);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

new Chart(ctx).Bar(data,options);

 

//数据结构

var data = {

	labels : ["January","February","March","April","May","June","July"],

	datasets : [

		{

			fillColor : "rgba(220,220,220,0.5)",

			strokeColor : "rgba(220,220,220,1)",

			data : [65,59,90,81,56,55,40]

		},

		{

			fillColor : "rgba(151,187,205,0.5)",

			strokeColor : "rgba(151,187,205,1)",

			data : [28,48,40,19,96,27,100]

		}

	]

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

new Chart(ctx).Line(data,options);

//数据结构

var data = {

	labels : ["January","February","March","April","May","June","July"],

	datasets : [

		{

			fillColor : "rgba(220,220,220,0.5)",

			strokeColor : "rgba(220,220,220,1)",

			pointColor : "rgba(220,220,220,1)",

			pointStrokeColor : "#fff",

			data : [65,59,90,81,56,55,40]

		},

		{

			fillColor : "rgba(151,187,205,0.5)",

			strokeColor : "rgba(151,187,205,1)",

			pointColor : "rgba(151,187,205,1)",

			pointStrokeColor : "#fff",

			data : [28,48,40,19,96,27,100]

		}

	]

}

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

new Chart(ctx).PolarArea(data,options);

//数据结构

var data = [

	{

		value : 30,

		color: "#D97041"

	},

	{

		value : 90,

		color: "#C7604C"

	},

	{

		value : 24,

		color: "#21323D"

	},

	{

		value : 58,

		color: "#9D9B7F"

	},

	{

		value : 82,

		color: "#7D4F6D"

	},

	{

		value : 8,

		color: "#584A5E"

	}

]