首页 > 代码库 > highcharts
highcharts
简单条形图用法:
1 <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> 2 <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
图的容器:
1 <div id="container" style="min-width:400px;height:400px"></div>
js代码:
1 <script> 2 $(function () { 3 $(‘#container‘).highcharts({ 4 chart: { 5 type: ‘bar‘ 6 }, 7 title: { 8 text: ‘各洲不同时间的人口条形图‘ 9 }, 10 subtitle: { 11 text: ‘数据来源: Wikipedia.org‘ 12 }, 13 xAxis: { 14 categories: [‘非洲‘, ‘美洲‘, ‘亚洲‘, ‘欧洲‘, ‘大洋洲‘], 15 title: { 16 text: null 17 } 18 }, 19 yAxis: { 20 min: 0, 21 title: { 22 text: ‘人口总量 (百万)‘, 23 align: ‘high‘ 24 }, 25 labels: { 26 overflow: ‘justify‘ 27 } 28 }, 29 tooltip: { 30 valueSuffix: ‘ 百万‘ 31 }, 32 plotOptions: { 33 bar: { 34 dataLabels: { 35 enabled: true, 36 allowOverlap: true 37 } 38 } 39 }, 40 legend: { 41 layout: ‘vertical‘, 42 align: ‘right‘, 43 verticalAlign: ‘top‘, 44 x: -40, 45 y: 100, 46 floating: true, 47 borderWidth: 1, 48 backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || ‘#FFFFFF‘), 49 shadow: true 50 }, 51 credits: { 52 enabled: false 53 }, 54 series: [{ 55 name: ‘1800 年‘, 56 data: [107, 31, 635, 203, 2] 57 }, { 58 name: ‘1900 年‘, 59 data: [133, 156, 947, 408, 6] 60 }, { 61 name: ‘2008 年‘, 62 data: [973, 914, 4054, 732, 34] 63 }] 64 }); 65 }); 66 </script>
效果:
highcharts
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。