以美元货币显示JSON值(前置$Dollar符号）

Display JSON Values in US Dollar Currency (prepend $ dollar sign)

本文关键字：前置 Dollar 符号 美元 货币 显示 JSON      更新时间：2023-09-26

我一直在开发Javascript InfoVis工具包，以便在交互式区域图中创建[高度乐观]的预测预测。

我在让标签在图表中显示"$"前缀时遇到问题。

然而，我能够成功地在工具提示中包含"$"+值+"M"（当你将鼠标悬停在图表的某个区域上时，它会显示，例如：AUM:114万美元——理想情况下，这就是我希望标签显示的方式）；使用javascript函数

  //enable tips
  Tips: {
    enable: true,
    onShow: function(tip, elem) {
      tip.innerHTML = "<b>" + elem.name + "</b>: " + "&#36;" + elem.value + "M";
    }
  },

json数据如下所示：

var json = {
    'color': ['#ccc', '#54b666', '#2d6837', '#15311a'],
    'label': ['Year Expenses', 'Year Net Profit', 'Year Profit', 'AUM'],
    'values': [
    {
      'label': 'Year 1',
      'values': [.05, .14, .25, 5]
    }, 
    {
      'label': 'Year 2',
      'values': [.06, .21, .34, 6.14]
    }, 
    {
      'label': 'Year 3',
      'values': [.06, .29, .47, 7.85]
    }, 
    {
      'label': 'Year 5',
      'values': [.13, .54, .91, 14.30]
    }, 
    {
      'label': 'Year 10',
      'values': [.35, 5.93, 6.67, 115.46]
    }
    ]
};

带有图表的html页面：http://kimerick.com/invest/financials.html

以及完整的js：http://kimerick.com/invest/js/area/example1.js

这些标签可以通过css选择器选择，因此您也可以使用css自动生成前缀：

#infovis-label div div div:last-child:before{ content:"$"; }

要更改工具提示的位置，offsetX和offsetY选项可用：

var viz = new $jit.Viz({
    Tips: {
        enable: true,
        type: 'Native',
        offsetX: 10,
        offsetY: 10,
        onShow: function(tip, node) {
            tip.innerHTML = node.name;
        }
    }
});
相关文章：