2

私は 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

4

2 に答える 2

2

これらのラベルは css-selector で選択できるため、css を使用してプレフィックスを自動的に生成することもできます。

#infovis-label div div div:last-child:before{ content:"$"; }
于 2013-02-16T05:51:52.000 に答える
0

ツールチップの位置を変更するには、offsetX および offsetY オプションを使用できます。

var viz = new $jit.Viz({
    Tips: {
        enable: true,
        type: 'Native',
        offsetX: 10,
        offsetY: 10,
        onShow: function(tip, node) {
            tip.innerHTML = node.name;
        }
    }
});
于 2013-02-16T10:16:39.270 に答える