HighCharts 框架我想在Tooltip默认显示的基础上添加一个来自后台的一个说明字段

Posted 2023-03-22

这个字段只有在这个位置出现，和其他数据是一块从数据库取出来的，可以做的到吗？ 知道的告诉一下！拜托了~

这是没有问题的，如后台传到data和这个特有的字段（如title或者单位）,通过data.title传进来即可使用 参考技术A 'Total: '+ this.point.stackTotal; 参考技术B 自己看
tooltip:
shared: false, //是否共享提示，也就是X一样的所有点都显示出来
usehtml: true, //是否使用HTML编辑提示信息
headerFormat: '<small>point.key</small><table>',
pointFormat: '<tr><td style="color: series.color">series.name: </td>' +
'<td style="text-align: right"><b>point.y</b></td></tr>'+
'<tr><td>说明:</td><td>point.description</td></tr>',
footerFormat: '</table>',
valueDecimals: 2 //数据值保留小数位数

series: [
name: 'DOWN',
data: ['y':6,'description':'说明内容']
]

Highcharts：用逗号格式化所有数字？

【中文标题】Highcharts：用逗号格式化所有数字？

【英文标题】：Highcharts: Format all numbers with comma?

【发布时间】：2015-05-26 09:33:32

【问题描述】：

我正在使用 Highcharts，我想将图表中任何位置显示的所有数字（工具提示、轴标签...）格式化为以逗号分隔的千位。

否则，默认的工具提示和标签很棒，我想保持它们完全相同。

例如，在此图表中，数字应为2,581,326.31，但其他方面完全相同。

我该怎么做？

我尝试添加：

    tooltip: 
        pointFormat: "point.y:,.0f"
    

但这摆脱了工具提示中漂亮的圆圈和系列标签 - 我想保留它。理想情况下，我更喜欢在整个图表中使用单个选项来设置全局数字格式。

【问题讨论】：

我会尝试使用自定义语言，请参阅 ***.com/questions/7419358/…

【参考方案1】：

这可以使用thousandSep (API) 全局选项进行设置。

Highcharts.setOptions(
    lang: 
        thousandsSep: ','
    
);

见this JSFiddle example。

【讨论】：

有些人可能会发现decimalPoint 选项相关且有用。 See API.

默认的千位分隔符现在看起来是一个空格。他们的 API 有什么变化吗？甚至他们的示例也在工具提示中将其显示为空格而不是逗号。 jsfiddle.net/highcharts/rmTWS

空间是 Highcharts 4.1.0 的默认设置。在此之前是逗号。 “使用空格作为默认的千位分隔符。它独立于文化和 ISO 标准。” github.com/highcharts/highcharts/commit/…

谢谢！现在如何用逗号设置 y 轴？

奇数..这在您的 jsFiddle 中有效，但在我的代码中无效...我仍然有空格。

【参考方案2】：

这种方式对我有用。

我在 yAxis 选项中进行了配置。

yAxis: 
  labels: 
    formatter: function() 
        return Highcharts.numberFormat(this.value, 2);
    
  

【讨论】：

谢谢，我一直在通过所有答案寻找这个，因为我有兴趣在 yAxis 上显示

在互联网上搜索了大约 4 个小时后，我得到了这个对我有用的答案。谢谢@Hien

【参考方案3】：

如果您想显示不带逗号和空格的数字。

例如。默认情况下，9800 显示为 9 800。

如果您希望 9800 显示为 9800

你可以在工具提示中试试这个：

    tooltip: 
     pointFormat: '<span>point.y:.f</span>'
   

【讨论】：

需要针对共享工具提示进行调整。

【参考方案4】：

这种方式对我有用。

我使用 Angular 10，我为 Tooltip 和 yAxis 做了这个。

对于 yAxis 使用 numberFormat:

 labels: 
              format: 'value',
              style: 
                color: Highcharts.getOptions().colors[0]
              ,
              formatter: function() 
                return Highcharts.numberFormat(this.value, 3);
            
            ,

对于工具提示：

point.y:.f