HighCharts中几种tooltip的显示格式
推荐学习地址 => https://www.hcharts.cn/docs/basic-tooltip
https://api.hcharts.cn/#Highcharts.numberFormat
这里给出两个常用的例子
1.折线图横坐标为时间轴时,想显示成
.ts中相关highcharts配置:
1 $scope.overviewChart = <HighChartsNGConfig>{ 2 options: { 3 title: { 4 text: `` 5 }, 6 chart: { 7 type: 'line' 8 }, 9 yAxis: { 10 min: 0, 11 title: { text: null }, 12 labels: { 13 formatter: function () { 14 return this.value + "%"; 15 } 16 } 17 }, 18 xAxis: { 19 type: "datetime", 20 dateTimeLabelFormats: { 21 day: '%b/%e', 22 month: '%y年%b月', 23 week: '%b/%e', 24 year: '%Y年', 25 millisecond: '%b/%e', 26 } 27 // dateTimeLabelFormats: { // don't display the dummy year 28 // month: '%e. %b', 29 // year: '%b' 30 // }, 31 }, 32 tooltip: { 33 formatter: function () { 34 var d = new Date(this.x); 35 var s = '<b>' + d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日' + '</b>'; 36 s += '<br/><span style="color:' + this.point.series.color + '">' + this.point.series.name + ': ' + 37 this.point.y.toFixed(2) + '%' + ' </span>'; 38 return s; 39 } 40 }, 41 legend: { 42 enabled: true 43 }, 44 }, 45 }
2. tootip想把数字显示成带有千位符号的,如这样:
饼图的配置代码
1 //图中数字显示成带千位符号的 2 Highcharts.setOptions({ 3 lang: { 4 thousandsSep: ',' 5 } 6 }); 7 //http code概念饼图 8 $scope.pieChart = <HighChartsNGConfig>{ 9 options: { 10 title: { 11 text: `` 12 }, 13 chart: { 14 type: 'pie', 15 height: 300, 16 }, 17 tooltip: { 18 // headerFormat: '{point.name}<br>', 19 // pointFormat: '{series.name}: <b>{point.y}%</b>' 20 }, 21 plotOptions: { 22 pie: { 23 innerSize: 150, 24 allowPointSelect: true, 25 cursor: 'pointer', 26 dataLabels: { 27 enabled: false, 28 }, 29 showInLegend: true 30 } 31 }, 32 }, 33 loading: false 34 };
转载于:https://www.cnblogs.com/XHappyness/p/7238116.html
HighCharts中几种tooltip的显示格式相关推荐
- 函数指针--Nginx和Redis中两种回调函数写法
1.Nginx和Redis中两种回调函数写法 #include <stdio.h>//仿Nginx风格 //结构外声明函数指针类型 typedef void (*ngx_connectio ...
- pl/sql中三种游标循环效率对比
pl/sql中三种游标循环效率对比 - Oracle数据库栏目 - 红黑联盟 http://www.2cto.com/database/201307/224636.html 转载于:https://b ...
- JAVA中几种常用JSON库性能比较
点击上方"方志朋",选择"置顶公众号" 技术文章第一时间送达! 作者:飞污熊 xncoding.com/2018/01/09/java/jsons.html 本 ...
- 简单介绍Lua中三种循环语句的使用
今天小编就为大家分享一篇关于Lua中三种循环语句的使用讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧 Lua的循环和C语言的循环的语法其实差不多,所以, ...
- mysql general bin区别_MySQL中几种常见的日志
前言: 在 MySQL 系统中,有着诸多不同类型的日志.各种日志都有着自己的用途,通过分析日志,我们可以优化数据库性能,排除故障,甚至能够还原数据.这些不同类型的日志有助于我们更清晰的了解数据库,在日 ...
- zynq学习03 zynq中三种实现GPIO的方式
http://m.blog.csdn.net/article/details?id=52123465 http://blog.chinaaet.com/songhuangong/p/43084 本文介 ...
- Android TextView中设定个别文字字体显示格式
Android TextView中设定个别文字字体显示格式 文章分类:移动开发 用Html来格式化字符,例如要实现如下的显示: "这只是一个测试字符串,测试黑体字.斜体字.下划线.红色字的显示." 可 ...
- C#中三种定时器对象的比较
·关于C#中timer类 在C#里关于定时器类就有3个 1.定义在System.Windows.Forms里 2.定义在System.Threading.Timer类里 3.定义在System.Tim ...
- JAVA中方法的类型转换_Java中几种常用数据类型之间转换的方法
Java中几种常用的数据类型之间转换方法: 1. short-->int 转换 exp: short shortvar=0; int intvar=0; shortvar= (short) in ...
最新文章
- android studio怎么输出文本,Android Studio 如何获取 text文本内容
- ASP.NET Ajax – History Support 續
- php加mysql分页_php mysql 分页函数
- 切换日期_2.4.14-切换时区分析
- 关于ESXI能虚拟出多少个虚拟机和CPU的关系
- 从生活角度学习应用程序、虚拟目录、应用程序池(解惑篇)
- 你的安全设置不允许在您的计算机,你的安全设置不允许网站使用安装在你的计算机上的ActiveX控件...
- php与java的关系_PHP基本语法以及和Java的区别
- CentOS7.6 MySQL8环境搭建 配置远程登录 字符集UTF8 简单密码
- Linux 驱动头文件说明
- form组件、cookie、session机制
- html 文件域变滑块,小巧的jQuery区域范围滑块插件noUiSlider
- 合并数字 — m个数字消除相邻的差的绝对值为1的两个数中较大的那一个,直到没有两个相邻的差的绝对值为 1 的数(动态数组定义)
- form表单提交大量input,php接收不全
- SQLite不同插入方法的效率对比测试
- Android 经典系统 HTC One 802d国行电信专版/最新Viper2.6.0/永久root/强大的功能、高级设置/纯净省电ROM
- Java开发环境搭建步骤
- 从零开始在云服务器上搭建个人博客
- 【冷眼看CES2018】AI概念满天飞,大型吹牛集会可休矣
- 链接chinanet无法出现登陆界面(电脑),360开wifi说缺少一个网卡
热门文章
- python列表的加法_Python列表加法理解
- mysql parameters_MySqlCommand Command.Parameters.Add已过时?mysql-问答-阿里云开发者社区-阿里云...
- php ==gt;,谈谈PHP中的 -gt;、=gt; 和 :: 符号 - 易采站长站
- python回到首行_python读取文件首行和最后一行
- 燕山大学计算机考研专硕专业课,燕山大学(专业学位)计算机技术研究生考试科目和考研参考书目...
- java 处理时间的类_java 日期时间处理类
- 计算机屏幕亮度一般为多少,笔记本显示器的亮度一般设置为多少?
- php apache 多进程,php多进程 防止出现僵尸进程 如何 使 apache 成为 僵尸进程
- SpringSecurity Filter顺序
- java stream groupingBy(classifier, downstream, mapFactory)