Highcharts属性中英文参照

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>Highcharts Demo</title>  
  6. <script type="text/javascript" src="js/jquery.min.js"></script>  
  7. <script type="text/javascript" src="js/highcharts.js"></script>  
  8. <script type="text/javascript" src="js/excanvas.compiled.js"></script>  
  9. <script type="text/javascript">  
  10. var chart;  
  11. $(document).ready(function() {  
  12.     chart = new Highcharts.Chart({  
  13.         chart: {  
  14.             renderTo: 'container',//设置显示图表的容器  
  15.             type: 'line',//设置图表样式，可以为line,spline, scatter, splinearea bar,pie,area,column  
  16. //          defaultSeriesType: 'column', //图表的默认样式  
  17. //          margin:[21, 23, 24, 54],//整个图表的位置(上下左右的空隙)  
  18.             marginRight: 200,//右边间距  
  19.             marginBottom: 25//底部间距/空隙  
  20. //          inverted: false,//可选，控制显示方式，默认上下正向显示  
  21. //          shadow:true,//外框阴影  
  22. //          backgroundColor:"#FFF",  
  23. //          animation:true,  
  24. //          borderColor:"#888",  
  25. //          borderRadius:5,  
  26. //          borderWidth:1,  
  27. //          ignoreHiddenSeries:true,  
  28. //          reflow:true,  
  29. //          plotBorderWidth:1,  
  30. //          alignTicks:true,
  31.               zoomtype:'xy' //x轴y轴方向均可鼠标拖动放大  
  32.         },  
  33.         labels:{//在报表上显示的一些文本  
  34.             items:[{  
  35.                 html:'本图表数据有误，仅用于说明相应的属性',  
  36.                 style:{left:'100px',top:'60px'}  
  37.             }, {  
  38.                 html:'http://www.highcharts.com/demo',  
  39.                 style:{left:'100px',top:'100px'}  
  40.             }]  
  41.         },  
  42.         credits:{//右下角的文本  
  43.             enabled: true,  
  44.             position: {//位置设置  
  45.                 align: 'right',  
  46.                 x: -10,  
  47.                 y: -10  
  48.             },  
  49.             href: "http://www.highcharts.com",//点击文本时的链接  
  50.             style: {  
  51.                 color:'blue'  
  52.             },  
  53.             text: "Highcharts Demo"//显示的内容  
  54.         },  
  55. //        plotOptions:{//绘图线条控制
  56.                               column: {//控制柱状宽度
  57.                                                 pointPadding: 0.2,
  58.                                                 borderWidth: 0,
  59.                                                 pointWidth: 30
  60.                                                },  
  61. //            spline:{  
  62. //                allowPointSelect :true,//是否允许选中点  
  63. //                animation:true,//是否在显示图表的时候使用动画  
  64. //                cursor:'pointer',//鼠标移到图表上时鼠标的样式  
  65. //                dataLabels:{  
  66. //                   enabled :true,//是否在点的旁边显示数据  
  67. //                    rotation:0  
  68. //                },  
  69. //                enableMouseTracking:true,//鼠标移到图表上时是否显示提示框  
  70. //                events:{//监听点的鼠标事件  
  71. //                    click: function() {  
  72. //                    }  
  73. //                },  
  74. //                marker:{  
  75. //                    enabled:true,//是否显示点  
  76. //                   radius:3,//点的半径  
  77. //                      fillColor:"#888"  
  78. //                    lineColor:"#000"  
  79. //                    symbol: 'url(http://highcharts.com/demo/gfx/sun.png)',//设置点用图片来显示  
  80. //                    states:{  
  81. //                        hover:{  
  82. //                            enabled:true//鼠标放上去点是否放大  
  83. //                                                    },  
  84. //                        select:{  
  85. //                            enabled:false//控制鼠标选中点时候的状态  
  86. //                        }  
  87. //                    }  
  88. //               },  
  89. //                states:{  
  90. //                    hover:{  
  91. //                        enabled:true,//鼠标放上去线的状态控制  
  92. //                        lineWidth:3  
  93. //                    }  
  94. //                },  
  95. //                stickyTracking:true,//跟踪  
  96. //                visible:true,  
  97. //                lineWidth:2//线条粗细  
  98. //                pointStart:100,  
  99. //            }  
  100. //        },  
  101.   
  102.         title: {  
  103.             text: 'Monthly Average Temperature',//标题  
  104.             x: -20 //center设置标题的位置  
  105.         },  
  106.         subtitle: {  
  107.             text: 'Source: WorldClimate.com',//副标题  
  108.             x: -20//副标题位置  
  109.         },  
  110.         xAxis: {//横轴的数据  
  111.             categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',  
  112.                 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']  
  113. //          lineWidth:1,//纵轴一直为空所对应的轴，即X轴  
  114. //          plotLines: [{//一条竖线  
  115. //               color: '#FF0000',  
  116. //                2,  
  117. //               value: 5.5  
  118. //           }]  
  119. //          labels: {//设置横轴坐标的显示样式  
  120. //              rotation: -45,//倾斜度  
  121. //              align: 'right',  
  122. //              style: {  
  123. //                   font: 'normal 13px Verdana, sans-serif'  
  124. //                   color: 'white'  
  125. //              }  
  126. //          }  
  127.   
  128.         },  
  129.         yAxis: {  tickPixelInterval: 20, //两坐标之间的宽度
  130. //          tickInterval: 200,  //自定义刻度  
  131. //          offset:60,  //把X轴的位置往右移动 在highstock里面依然有效  
  132. //          max:1000,//纵轴的最大值  
  133. //          min: 0,//纵轴的最小值  
  134.             title: {//纵轴标题  
  135.                 text: '百分数'  
  136.             },  
  137.             labels : {  
  138.                 formatter : function() {//设置纵坐标值的样式  
  139.                  return this.value + '%';  
  140.                 }  
  141.                },   
  142.             plotLines: [{  
  143.                 value: 0,  
  144.                  1,  
  145.                 color: '#808080'  
  146.             }]  
  147.         },  
  148.         tooltip: {//鼠标移到图形上时显示的提示框  
  149.             formatter: function() {  
  150.                     return '<b>'+ this.series.name +'</b><br/>'+  
  151.                     this.x +': '+ this.y +'°C';  
  152.             }  
  153. //          crosshairs:[{//控制十字线  
  154. //              1,  
  155. //              color:"#CCC",  
  156. //              dashStyle:"longdash"  
  157. //          }  
  158.   
  159.         },  
  160.         legend: {//方框所在的位置(不知道怎么表达)  
  161.             layout: 'vertical',  
  162.             align: 'right',  
  163.             verticalAlign: 'top',  
  164.             x: -10,  
  165.             y: 100,  
  166.             borderWidth: 0  
  167.         },  
  168.         series: [{//以下为纵轴数据  
  169.             name: 'Tokyo',  
  170.             data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]  
  171.         }, {  
  172.             name: 'New York',  
  173.             data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]  
  174.         }, {  
  175.             name: 'Berlin',  
  176.             data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]  
  177.         }, {  
  178.             name: 'London',  
  179.             data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]  
  180.         }]  
  181.     });  
  182. });  
  183. </script>  
  184. </head>  
  185. <body>  
  186. <div id="container" ></div>  
  187. </body>  
  188. </html>  

 

效果图类似于如下:

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ZDPPU/p/5993785.html