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
            };