|
本帖最后由 ipakk 于 2017-1-28 22:46 编辑
向右的柱状图- <div id="bar-chart" class="graphic"></div>
复制代码
脚注
(刚观察CNN某网站的源码和框架偶然发现:Refugees from countries targeted in Trump's order,源码和框架在这里看:- <!DOCTYPE html>
- <!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
- <!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
- <!--[if IE 9 ]> <html class="ie9" lang="en-US"> <![endif]-->
- <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-US"> <!--<![endif]-->
- <head>
- <meta charset="utf-8">
- <meta name="robots" content="noindex">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
- <title>CNN : Graphic : Refugees from countries targeted in Trump's order</title>
- <meta name="title" content="Refugees from countries targeted in Trump's order">
- <meta name="description" content="">
- <meta name="keywords" content="">
- <meta name="news_keywords" content="">
- <meta name="section" content="">
- <meta name="source" content="CNN">
- <meta name="subsection" content="">
- <meta name="application-name" content="CNN">
- <!-- Facebook settings -->
- <meta property="og:description" content="">
- <meta property="og:image" content="">
- <meta property="og:type" content="">
- <meta property="og:title" content="Refugees from countries targeted in Trump's order">
- <meta property="og:url" content="">
- <meta property="fb:admins" content="690014395">
- <meta property="fb:app_id" content="80401312489">
- <!-- Twitter card settings -->
- <meta name="twitter:card" content="summary_large_image">
- <meta name="twitter:site" content="@cnn">
- <meta name="twitter:site:id" content="759251">
- <meta name="twitter:creator" content="@cnn">
- <meta name="twitter:title" content="Refugees from countries targeted in Trump's order">
- <meta name="twitter:description" content="">
- <link rel="canonical" href="">
- <link rel="shortcut icon" href="//cnn.com/favicon.ie9.ico">
- <link rel="apple-touch-icon" href="//i.cdn.turner.com/cnn/.e/img/3.0/global/misc/apple-touch-icon.png">
- <link rel="stylesheet" type="text/css" href="css/graphic-header.css?1485524128" />
- <base target="_blank">
- </head>
- <body>
- <header>
- <!-- javascripts -->
-
- <script type="text/javascript" src="js/graphic-header.js?1485524128"></script>
- <script type="text/javascript" src="//z.cdn.turner.com/cnn/.e/js/libs/jquery-1.9.1.min.js"></script>
- </header>
- <section>
- <div id="meta">
- <h1 class="hed">Refugees from countries targeted in Trump's order</h1>
- <h2 class="dek">In fiscal 2016, US admitted 36,722 refugees from Iraq, Iran, Syria, Yemen, Sudan, Somalia and Libya.</h2>
- </div>
- <div id="bar-chart" class="graphic"></div>
- <div id="footer">
-
- <p class="source">Source: Refugee Processing Center / US State Department’s Bureau of Population, Refugees and Migration</p>
- </div>
- <script type="text/javascript">
- var DATA = [{"label": "Syria", "amt": "12587"}, {"label": "Iraq", "amt": "9880.0"}, {"label": "Somalia", "amt": "9020"}, {"label": "Iran", "amt": "3750.0"}, {"label": "Sudan", "amt": "1458"}, {"label": "Yemen", "amt": "26"}, {"label": "Libya", "amt": "1"}];
- </script>
- </section>
- <footer>
- <!-- javascripts -->
- <script src="//z.cdn.turner.com/cnn/.e/interactive/js/lib/vendor/pym/pym.v1.min.js"></script>
- <script src="//z.cdn.cnn.com/cnn/.e/interactive/js/lib/vendor/d3/d3-4.3.0-min.js"></script>
-
-
-
-
- <script type="text/javascript" src="js/graphic-footer.js?1485524128"></script>
- </footer>
- </body>
- </html>
复制代码
好像还要画图,用什么工具画?有谁知道吗,可否推荐一个比较好的工具,谢谢! |
|