Amcharts - 如何在自定义工具提示中格式化valueField?

时间:2016-07-20 09:05:42

标签: javascript amcharts

我有一个基本的AmGraph:

    graph = new AmCharts.AmGraph();

    graph.lineThickness = 4;
    graph.valueAxis = valueAxis;
    graph.fillAlphas = 0;
    graph.valueAxis = valueAxis;
    graph.valueAxis.minimum = 0;

    graph.title = "likes";
    graph.labelText = " ";
    graph.valueField = "likes_1";

问题是如果我使用自定义balloonText函数,则numberFormatter不会格式化值:

    graph.numberFormatter = {precision: -1, decimalSeparator:",", thousandsSeparator:","};

所以,如果我使用它:

    graph.balloonText = "<b>got: [[likes_1]] </b>";

工具提示如下所示:

   "got: 1000"

如何格式化值?如果我尝试使用javascript格式化它(Numeral.js):

    graph.balloonText = "<script>numeral( [[likes_1]] ).format("0,0") </script>";

在构建页面时,通配符不会被实际值替换(而是在悬停图表时?),所以我得到:

    Uncaught ReferenceError: likes_32 is not defined

我该怎么办?

1 个答案:

答案 0 :(得分:2)

  

(首先我强烈建议使用较新的图表方式   初始化!看   here   为此。)

您可以使用balloonFunction代替balloonText,这样您就可以使用JavaScript更改文本。在那里你可以根据你的意愿格式化数字 我使用demo格式化程序准备了AmCharts.formatNumber

return AmCharts.formatNumber(graphDataItem.values.value, {
        precision: -1,
        decimalSeparator: '.',
        thousandsSeparator: ','
    }, -1);

你仍然可以在那里使用Numeral.js(它的语法对我来说似乎更直接)。

return numeral(graphDataItem.values.value).format("0,0");