朗文5高级双解@基本上所有的电子词典缺条形图

kyletruman

" p# i+ u/ E- I- w0 N" T有道和海词的电子数据来源中也缺条形柱状图，纸质词典是有的，比如查absolute，
发现论坛上LDOCE6和LDOCE5两个mdx也缺条形柱状图，自然地数据就缺了一大截，其实在朗文5双解中，柱状图还比较多。目前我感到比较棘手的是，这些柱状图怎么添加到TXT中去？是不是先把这些缺的编辑成html，然后转成TXT？(听说把docx转成TXT不太理想)
7 X  X! f4 ]5 z  i

ipakk

向右的柱状图

1. <div id="bar-chart" class="graphic"></div>

复制代码

脚注

1. <div id="footer">

复制代码

(刚观察CNN某网站的源码和框架偶然发现：Refugees from countries targeted in Trump's order，源码和框架在这里看：

1. <!DOCTYPE html>
   
2. <!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
   $ `' S4 u! D0 H
3. <!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
   
4. <!--[if IE 9 ]> <html class="ie9" lang="en-US"> <![endif]-->
   
5. <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-US"> <!--<![endif]-->
   
6. <head>
   
7. 
   7 S0 F3 R4 k  m) K1 v; E. Z& C# M  U
8.   <meta charset="utf-8">
   
9.   <meta name="robots" content="noindex">
   8 Z& d- v" a7 m
10.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6 @+ @" R) r5 i2 U$ V
11.   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    
12. 
    
13.   <title>CNN : Graphic : Refugees from countries targeted in Trump's order</title>
    
14. 
    0 ?% M1 N  k+ K# Q6 }
15.   <meta name="title" content="Refugees from countries targeted in Trump's order">
    # C  w$ x8 r( `2 D
16.   <meta name="description" content="">
    
17.   <meta name="keywords" content="">
    2 z/ a8 O- Q  Y
18.   <meta name="news_keywords" content="">
    
19.   <meta name="section" content="">
    & K7 i% q3 D: C5 }
20.   <meta name="source" content="CNN">
    : \7 e! N4 m# d" j- g+ ?4 S
21.   <meta name="subsection" content="">
    
22.   <meta name="application-name" content="CNN">
    
23. 
    
24.   <!-- Facebook settings -->
    $ K0 H: [6 v6 `$ ^* m, J4 ^. }
25.   <meta property="og:description" content="">
    8 F& R6 M# m* j" @% H3 ]  f' \8 D
26.   <meta property="og:image" content="">
    
27.   <meta property="og:type" content="">
    7 f6 n! c2 u  n7 i5 y
28.   <meta property="og:title" content="Refugees from countries targeted in Trump's order">
    9 c' L* f- \* e. N" U
29.   <meta property="og:url" content="">
    
30.   <meta property="fb:admins" content="690014395">
    
31.   <meta property="fb:app_id" content="80401312489">
    * S* Z7 m( N& p. Q& Q
32. 
    ! b7 N2 D5 p. C) T& }
33.   <!-- Twitter card settings -->
    ) R  z/ l7 V3 I  s2 |; P5 t7 J
34.   <meta name="twitter:card" content="summary_large_image">
    : f5 V8 y8 Y  {* K0 X
35.   <meta name="twitter:site" content="@cnn">
    / a" P+ ~% ]3 U4 k- Q
36.   <meta name="twitter:site:id" content="759251">
    ! B1 h2 `$ |  H( ]' j
37.   <meta name="twitter:creator" content="@cnn">
    2 u3 w. l, e; D" x, s
38.   <meta name="twitter:title" content="Refugees from countries targeted in Trump's order">
    ; x" `) U: N. I2 U; {
39.   <meta name="twitter:description" content="">
    
40. 
    
41.   <link rel="canonical" href="">
    
42.   <link rel="shortcut icon" href="//cnn.com/favicon.ie9.ico">
    
43.   <link rel="apple-touch-icon" href="//i.cdn.turner.com/cnn/.e/img/3.0/global/misc/apple-touch-icon.png">
    
44.   <link rel="stylesheet" type="text/css" href="css/graphic-header.css?1485524128" />
    + \. B" ?) D2 F' \
45. 
    
46.   <base target="_blank">
    
47. 
    : F/ t, a% O# h
48. </head>
    
49. 
    
50. <body>
    
51.   <header>
    ! Z3 |  q+ G6 i# ^
52.     <!-- javascripts -->
    + v' h0 @# r' C# {7 n4 }
53.    
    . z" u6 M6 M) a8 R' y
54.     <script type="text/javascript" src="js/graphic-header.js?1485524128"></script>
    8 q* e" v6 s) a4 z- W9 Q! w' p
55.     <script type="text/javascript" src="//z.cdn.turner.com/cnn/.e/js/libs/jquery-1.9.1.min.js"></script>
    . P. Q" ~9 H' C9 i/ ^3 X
56.   </header>
    
57. 
    0 L+ T" V' n7 b3 F5 ^8 ]5 h
58.   <section>
    
59. 
    2 U% k+ o' e# ^" [# o: y
60. 
    
61.   <div id="meta">
    : }" A6 }* ?8 I, l
62.     <h1 class="hed">Refugees from countries targeted in Trump's order</h1>
    9 r6 ?/ r7 ?# V% e( n% o
63.     <h2 class="dek">In fiscal 2016, US admitted 36,722 refugees from Iraq, Iran, Syria, Yemen, Sudan, Somalia and Libya.</h2>
    - o4 G8 ?4 c: K+ J
64.   </div>
    
65. 
    5 I. k# m  }# c  |! a/ _
66.   <div id="bar-chart" class="graphic"></div>
    / c6 H3 [; @4 m  ]: J5 m  P
67. 
    # R& H/ m8 }. t6 f5 Q0 B
68.   <div id="footer">
    9 I: f4 K5 U2 z. |. r
69.    
    
70.     <p class="source">Source: Refugee Processing Center / US State Department’s Bureau of Population, Refugees and Migration</p>
    
71.   </div>
    
72. 
    5 i* _- F, e4 ]4 K/ o. @. L/ w* H
73.   <script type="text/javascript">
    
74.     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"}];
    
75.   </script>
    % F6 C, V) N% i6 _! e
76. 
    
77. 
    
78.   </section>
    2 l/ [% s' G5 D
79. 
    
80.   <footer>
    1 a7 i0 X5 \+ Z1 x9 A$ c0 q: r7 ^
81.   <!-- javascripts -->
    
82.   <script src="//z.cdn.turner.com/cnn/.e/interactive/js/lib/vendor/pym/pym.v1.min.js"></script>
    
83.   <script src="//z.cdn.cnn.com/cnn/.e/interactive/js/lib/vendor/d3/d3-4.3.0-min.js"></script>
    ' X* E" z* \9 ^
84. 
    
85.   
    7 Q# }" y' M) T/ r4 W: ^
86.   
    4 r* ~6 b* k0 h- G
87.   
    $ F- D, D# V6 h8 [0 V% G" k
88.   
    
89.   <script type="text/javascript" src="js/graphic-footer.js?1485524128"></script>
    # s1 ?# I$ q2 K4 N& ]
90. 
    
91.   </footer>
    
92. </body>
    0 v# K+ G, {1 D2 q* r$ Y% a; l
93. </html>

复制代码

好像还要画图，用什么工具画？有谁知道吗，可否推荐一个比较好的工具，谢谢！

ipakk

继续看一下，不知是不是要在js脚本中像CNN网页那样添加每个条形柱状图的某些值？比如CNN添加的：

1.   <script type="text/javascript">
   ) r9 J& b9 m7 ]& `3 V7 ^
2.     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"}];
   $ r1 U% V7 V) O
3.   </script>

复制代码

7 j. n. H8 {5 Q2 G# F+ T( D可是坐标上的值又怎么添加？

lxchen2001

重点是在数据
% i: }- r4 p2 g+ P" w9 ]* ?# c- f. y
; k2 y( V2 M' l+ Evar DATA = .....
  @( W) z( A; k+ s/ X
; _' q2 N! |' e. m/ z呈现方法可以用Javascript: (JQuery +) 外挂第三方画图插件

0 q% Z: k; X# F% ~" h+ R& @(朗文5有图可下）

8 i) U5 N0 g, }- ]  J

mdx痴迷者

lxchen2001 发表于 2017-1-29 16:45
5 u8 ?6 ~4 z( }' p重点是在数据

' W9 h7 R( _6 O% N$ I/ D. Ivar DATA = .....

, Y; _/ v6 v/ t) R. j# Alxchen2001大人，请教一下，您是用哪一个外挂第三方画图插件画出图的，我想学，谢谢！

lxchen2001

mdx痴迷者 发表于 2017-1-29 10:00
lxchen2001大人，请教一下，您是用哪一个外挂第三方画图插件画出图的，我想学，谢谢！

. d5 b3 _! A3 E2 L5 J/ M
4 L) {- Y) u8 o7 A5 w. Z9 D% S2 N; a网上搜搜，可以找到N多.

https://www.amcharts.com/
$ N5 ?7 m3 _1 _4 n) F4 S5 Jhttp://www.chartjs.org
http://highcharttable.org/
2 m0 q7 e- ^+ F8 X0 e& Ehttp://canvasjs.com/html5-javascript-bar-chart/
https://plot.ly/javascript/
3 r# E5 l' P5 xhttps://d3js.org/
7 M: s" m$ N' K  n! V7 ?% d3 Thttp://www.jchartfx.com/

中文的：
* C3 ~5 m( c2 `& y; u0 i* s% H7 Zhttp://www.echartsjs.com

Okya

' |. p- G) e. b
谢谢楼主。。。。

2 u; t  R: S  S( h4 }  N8 c