<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.1 // EN" "xhtml11.dtd"> <Html debug = "true"> <Head> <Title> c Demo-Column with rotated labels </title> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <! -- Meta http-equiv = "X-UA-Compatible" content = "chrome = 1" --> </Head> <Body> <Script type = "text/javascript" xsrc = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<Script type = "text/javascript">
(Function ($) {// encapsulate jQuery
$ (Function (){ $ ('# Iner'). highcharts ({ Chart :{ Type: 'column ', Margin: [50, 50,100, 80] }, Title :{ Text: 'examinee's score bar fig' }, XAxis :{ Categories :[ 'Zhang san ', 'Li si ', 'Wang 5 ', 'Zhao liu ', 'Student 1 ', 'Student 2 ', 'Student 3 ', 'Student 4 ', 'Student 5 ', 'Student 6 ', 'Student 7 ', ], Labels :{ Style :{ FontSize: '13px ', FontFamily: 'verdana, sans-serif' } } }, YAxis :{ Min: 0, Title :{ Text :'' } }, Legend :{ Enabled: false }, Tooltip :{ Formatter: function (){ Return '<B>' + this. x + '</B> <br/>' + 'Score: '+ Highcharts. numberFormat (this. y, 1) + 'Min '; } }, Series :[{ Name: 'population ', Data: [88.4, 21.8, 20.1, 20, 50, 60, 70, 80, 90, 100], DataLabels :{ Enabled: true, Rotation:-90, Color: '# ffff ', Align: 'right ', X: 4, Y: 10, Style :{ FontSize: '13px ', FontFamily: 'verdana, sans-serif' } } }] }); });
}) (JQuery ); </Script> <Script xsrc = "http://code.highcharts.com/highcharts.js"> </script> <Div id = "container" style = "min-width: 400px; height: 400px; margin: 0 auto"> </div> </Body> </Html>
|