javascript - 以美元货币显示 JSON 值（添加美元符号）

Question

我一直在研究 Javascript InfoVis Toolkit，以在交互式区域图中创建 [高度乐观的] 预测预测。

我无法让标签在图表中显示“$”前缀。

但是，我能够成功地在工具提示中包含“$”+值+“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

Answer 1

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

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

Answer 2

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

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