首页 > 其他分享 >Heightchars 图标插件

Heightchars 图标插件

时间:2023-01-11 09:47:09浏览次数:33  
标签:插件 title text Heightchars json var yAxis runoob 图标

官网地址  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
             },

 

标签:插件,title,text,Heightchars,json,var,yAxis,runoob,图标
From: https://www.cnblogs.com/lyq666666/p/17042863.html

相关文章

  • Vue中组件和插件的区别
    一、组件是什么1:组件的定义:组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件2:组件的优势......
  • linux离线安装插件包
    1、下载插件包(联网的linux环境下)#检查是否安装了vim(vim-minimal是vi)[root@localhostopt]#rpm-qa|grepvimvim-minimal-8.0.1763-16.el8.x86_64#下载vim相关插......
  • 42、mybatisplus配置分页插件
    1、旧版分页插件配置方法(MybatisPlus3.4.0版本之前)@EnableTransactionManagement//开启事务@Configuration@MapperScan(basePackages={"com.zimug.**.mapper"})p......
  • Docker 利用buildx插件构建多平台镜像
    ##安装DockerBuildx[安装DockerBuildx](https://docs.docker.com/build/buildx/install/)##运行Docker镜像分发的跨平台模拟器```shdockerrun--privile......
  • picgo插件开发
    ##借鉴文档[Typora配置picgo-core自动上传图片,及picgo-core上传组件开发](https://blog.csdn.net/weixin_45673647/article/details/121465975)[PicGo插件开发文档](h......
  • 代码编辑器插件 codemirror 和 monaco-editor 的使用
    codemirrorcodemirror官方文档vue-codemirror官方文档vue-codemirror官方examples因为是本项目是vue2所以先记录vue2中的使用安装4.0.6配合vue2npminsta......
  • 【转】pageOffice插件 springboot实现服务器上Word文档在线打开编辑保存
    pageOffice插件springboot实现服务器上Word文档在线打开编辑保存需求:在oa系统上,想实现在线,服务器上doc,docx文档,在web打开,编辑。编辑后,可以再同步保存到服务器端。开发......
  • 解决el-date-picker组件当日历面板展开时点击清空图标无法清空问题
    问题现象:支持选择多个时间的日期组件,在日历面板展开时点击清空图标是无法清空的  解决方案:查找资料发现可以通过change事件来监听清空操作,当监听到value值为null时......
  • vue3 使用clodop打印插件实现不预览直接打印
    一、下载安装C-LODOPhttps://www.lodop.net/download.html   解压文件后点击exe程序,启用服务   将上述的LodopFuncs.js文件放到工程某个文件下  ......
  • 电脑上的视频不显示封面,只显示播放器图标?
    百度搜索出结果一般是修改文件工具选项... 如果不行可能是系统问题,可以下载个视频预览组件来解决,具体操作方法是;以win7系统操作为例:可以是系统问题,可以下载个视频预览......