HighCharts中几种tooltip的显示格式

推荐学习地址 => https://www.hcharts.cn/docs/basic-tooltip

　　　　　　　   https://api.hcharts.cn/#Highcharts.numberFormat

这里给出两个常用的例子

1.折线图横坐标为时间轴时，想显示成

　　　　

.ts中相关highcharts配置：

             $scope.overviewChart = <HighChartsNGConfig>{
                 options: {
                     title: {
                         text: ``
                     },
                     chart: {
                         type: 'line'
                     },
                     yAxis: {
                         min: 0,
                         title: { text: null },
                         labels: {
                             formatter: function () {
                                 return this.value + "%";
                             }
                         }
                     },
                     xAxis: {
                         type: "datetime",
                         dateTimeLabelFormats: {
                             day: '%b/%e',
                             month: '%y年%b月',
                             week: '%b/%e',
                             year: '%Y年',
                             millisecond: '%b/%e',
                         }
                         // dateTimeLabelFormats: { // don't display the dummy year
                         //     month: '%e. %b',
                         //     year: '%b'
                         // },
                     },
                     tooltip: {
                         formatter: function () {
                             var d = new Date(this.x);
                             var s = '<b>' + d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日' + '</b>';
                             s += '<br/><span style="color:' + this.point.series.color + '">' + this.point.series.name + ': ' +
                                 this.point.y.toFixed(2) + '%' + ' </span>';
                             return s;
                         }
                     },
                     legend: {
                         enabled: true
                     },
                 },
             }

2. tootip想把数字显示成带有千位符号的，如这样：

　　　　　　　　　　　　　

　　　　　　　　

饼图的配置代码

             //图中数字显示成带千位符号的
             Highcharts.setOptions({
                 lang: {
                     thousandsSep: ','
                 }
             });
             //http code概念饼图
             $scope.pieChart = <HighChartsNGConfig>{
                 options: {
                     title: {
                         text: ``
                     },
                     chart: {
                         type: 'pie',
                         height: 300,
                     },
                     tooltip: {
                         // headerFormat: '{point.name}<br>',
                         // pointFormat: '{series.name}: <b>{point.y}%</b>'
                     },
                     plotOptions: {
                         pie: {
                             innerSize: 150,
                             allowPointSelect: true,
                             cursor: 'pointer',
                             dataLabels: {
                                 enabled: false,
                             },
                             showInLegend: true
                         }
                     },
                 },
                 loading: false
             };