使用带有Google图表的前缀格式化

时间:2013-09-17 18:24:08

标签: google-visualization prefix

我正在尝试根据表格中的数据动态创建图表,以便我的客户端能够在不触及javascript的情况下更新内容。

/* ----- Single Bar Graph ------ */
        jQuery(".single-bar table").each(function() {
            var data = new google.visualization.DataTable();
            var thisTableID = jQuery(this).parent().attr('id');

            data.addColumn('string', 'country');
            data.addColumn('number', 'amount');
            jQuery(this).children("tbody").children("tr.data").each(function(){
                var country="";
                var amount="";
                country = jQuery(this).find("td.country").text();
                amount = parseFloat(jQuery(this).find("td.amount").html());
                data.addRow([country, amount]);
            });

            // Set chart options
            var xAxis = jQuery(this).find("td.xAxis").text();
            var options = {
                title: jQuery('.single-bar table th').html(),
                width: 750,
                height: 350,
                colors: ['#7dc2af', '#d5d7d2', '#ba8c0a', '#006f51', '#6dadbf', '#3b3b3b'],
                is3D: true,
                fontSize: 12,
                fontName: 'AllerLight',
                titleTextStyle: {fontSize: 15, color: '#006f51'},
                chartArea:{left:100,top:50,bottom:0},
                backgroundColor: 'transparent',
                hAxis: {title: xAxis,color:'#0f0'}
            };

            var chart = new google.visualization.BarChart(document.getElementById(thisTableID));
            // This isn't working
            var formatter = new google.visualization.NumberFormat({prefix: '$'});
            formatter.format(data, 1); // Apply formatter to second column
            chart.draw(data, options);
        });

所以你会在这里看到我正在尝试将美元符号前缀添加到我的'amount'列,但它没有这样做。我的控制台没有错误。我试过在第0列添加一个前缀以及仅用于踢,但这似乎也不起作用。

非常感谢提前

1 个答案:

答案 0 :(得分:3)

“这不起作用”= $ -sign仅适用于工具提示?

要格式化hAxis,请定义hAxis.format

var options = {
  ..
  ..
  hAxis: { title: 'xAxis', color:'#0f0',
           format: '$#'  // <-- format
  }
};

<强>为什么吗
您正在使用NumberFormat格式化data而不是由图表本身生成的hAxis系列文本。

如果该列需要进一步格式化,请点击此处http://icu-project.org/apiref/icu4c/classDecimalFormat.html