Heightchars 图标插件

官网地址  https://www.runoob.com/highcharts/highcharts-setting-detail.html

带数字的折线图:

 1 html>
 2 <head>
 3 <meta charset="UTF-8" />
 4 <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
 5 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 6 <script src="https://code.highcharts.com/highcharts.js"></script>
 7 </head>
 8 <body>
 9 <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
10 <script language="JavaScript">
11 $(document).ready(function() {   
12    var title = {
13       text: '每月平均温度'   
14    };
15    var subtitle = {
16       text: 'Source: runoob.com'
17    };
18    var xAxis = {
19       categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
20          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
21    };
22    var yAxis = {
23       title: {
24          text: 'Temperature (\xB0C)'
25       }
26    };
27    var plotOptions = {
28       line: {
29          dataLabels: {
30             enabled: true
31          },   
32          enableMouseTracking: false
33            
34       }
35    };
36 
37    var series= [{
38          name: 'Tokyo',
39          data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
40       }, {
41          name: 'London',
42          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]
43       }
44    ];
45    
46    var json = {};
47 
48    json.title = title;
49    json.subtitle = subtitle;
50    json.xAxis = xAxis;
51    json.yAxis = yAxis;  
52    json.series = series;
53    json.plotOptions = plotOptions;
54    $('#container').highcharts(json);
55   
56 });
57 </script>
58 </body>
59 </html>

一些可能用到的tips

//清除版本网址
             credits: {
                 enabled: false
             },

 

posted @ 2023-01-11 09:31  大黄人  阅读(23)  评论(0)  编辑  收藏  举报