推荐学习地址 => 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的显示格式相关推荐

  1. 函数指针--Nginx和Redis中两种回调函数写法

    1.Nginx和Redis中两种回调函数写法 #include <stdio.h>//仿Nginx风格 //结构外声明函数指针类型 typedef void (*ngx_connectio ...

  2. pl/sql中三种游标循环效率对比

    pl/sql中三种游标循环效率对比 - Oracle数据库栏目 - 红黑联盟 http://www.2cto.com/database/201307/224636.html 转载于:https://b ...

  3. JAVA中几种常用JSON库性能比较

    点击上方"方志朋",选择"置顶公众号" 技术文章第一时间送达! 作者:飞污熊 xncoding.com/2018/01/09/java/jsons.html 本 ...

  4. 简单介绍Lua中三种循环语句的使用

    今天小编就为大家分享一篇关于Lua中三种循环语句的使用讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧 Lua的循环和C语言的循环的语法其实差不多,所以, ...

  5. mysql general bin区别_MySQL中几种常见的日志

    前言: 在 MySQL 系统中,有着诸多不同类型的日志.各种日志都有着自己的用途,通过分析日志,我们可以优化数据库性能,排除故障,甚至能够还原数据.这些不同类型的日志有助于我们更清晰的了解数据库,在日 ...

  6. zynq学习03 zynq中三种实现GPIO的方式

    http://m.blog.csdn.net/article/details?id=52123465 http://blog.chinaaet.com/songhuangong/p/43084 本文介 ...

  7. Android TextView中设定个别文字字体显示格式

    Android TextView中设定个别文字字体显示格式 文章分类:移动开发 用Html来格式化字符,例如要实现如下的显示: "这只是一个测试字符串,测试黑体字.斜体字.下划线.红色字的显示." 可 ...

  8. C#中三种定时器对象的比较

    ·关于C#中timer类 在C#里关于定时器类就有3个 1.定义在System.Windows.Forms里 2.定义在System.Threading.Timer类里 3.定义在System.Tim ...

  9. JAVA中方法的类型转换_Java中几种常用数据类型之间转换的方法

    Java中几种常用的数据类型之间转换方法: 1. short-->int 转换 exp: short shortvar=0; int intvar=0; shortvar= (short) in ...

最新文章

  1. android studio怎么输出文本,Android Studio 如何获取 text文本内容
  2. ASP.NET Ajax – History Support 續
  3. php加mysql分页_php mysql 分页函数
  4. 切换日期_2.4.14-切换时区分析
  5. 关于ESXI能虚拟出多少个虚拟机和CPU的关系
  6. 从生活角度学习应用程序、虚拟目录、应用程序池(解惑篇)
  7. 你的安全设置不允许在您的计算机,你的安全设置不允许网站使用安装在你的计算机上的ActiveX控件...
  8. php与java的关系_PHP基本语法以及和Java的区别
  9. CentOS7.6 MySQL8环境搭建 配置远程登录 字符集UTF8 简单密码
  10. Linux 驱动头文件说明
  11. form组件、cookie、session机制
  12. html 文件域变滑块,小巧的jQuery区域范围滑块插件noUiSlider
  13. 合并数字 — m个数字消除相邻的差的绝对值为1的两个数中较大的那一个,直到没有两个相邻的差的绝对值为 1 的数(动态数组定义)
  14. form表单提交大量input,php接收不全
  15. SQLite不同插入方法的效率对比测试
  16. Android 经典系统 HTC One 802d国行电信专版/最新Viper2.6.0/永久root/强大的功能、高级设置/纯净省电ROM
  17. Java开发环境搭建步骤
  18. 从零开始在云服务器上搭建个人博客
  19. 【冷眼看CES2018】AI概念满天飞,大型吹牛集会可休矣
  20. 链接chinanet无法出现登陆界面(电脑),360开wifi说缺少一个网卡

热门文章

  1. python列表的加法_Python列表加法理解
  2. mysql parameters_MySqlCommand Command.Parameters.Add已过时?mysql-问答-阿里云开发者社区-阿里云...
  3. php ==gt;,谈谈PHP中的 -gt;、=gt; 和 :: 符号 - 易采站长站
  4. python回到首行_python读取文件首行和最后一行
  5. 燕山大学计算机考研专硕专业课,燕山大学(专业学位)计算机技术研究生考试科目和考研参考书目...
  6. java 处理时间的类_java 日期时间处理类
  7. 计算机屏幕亮度一般为多少,笔记本显示器的亮度一般设置为多少?
  8. php apache 多进程,php多进程 防止出现僵尸进程 如何 使 apache 成为 僵尸进程
  9. SpringSecurity Filter顺序
  10. java stream groupingBy(classifier, downstream, mapFactory)