Question

我一直致力于使用Javascript InfoVis Toolkit在交互式区域图表中创建[高度乐观]的预测投影。

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

然而，我能够成功地在工具提示中包含“$”+值+“M”（当您将鼠标悬停在它所显示的图表区域上时，例如：AUM：$ 1.14M - 理想情况下，我希望标签如何显示）;使用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选择器进行选择，因此您也可以使用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;
        }
    }
});

以美元货币显示JSON值（前置美元符号）

2 个答案: