【问题标题】:Amcharts - how to format valueField inside custom tooltip?Amcharts - 如何在自定义工具提示中格式化 valueField?
【发布时间】:2016-07-20 09:05:42
【问题描述】:

我有一个基本的 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

我该怎么办?

【问题讨论】:

    标签: javascript amcharts


    【解决方案1】:

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

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

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

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

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

    【讨论】:

    • 我可以向 balloonFunction 回调发送任何参数吗?因为我的 chartData 是为多个图表设计的,每个图表都有不同的工具提示,以及不同的 valueField。或者我可以为每个图表构建不同的回调? graph.valueField = "likes_1"; graph2.valueField = "likes_2";
    • 由于balloonFunctiongraph 对象的一部分,因此每个图形可以有不同的格式化实现(或您想要对工具提示内容执行的任何操作)。你只需要返回一个有效的字符串,内容无关紧要。您可以轻松调试函数以查看通过参数提供的信息。
    • 谢谢,它有。这非常难看,因为我有一个图表和 40 个或更多图表,因此有 40 个或更多格式化函数(4 个切换视图中的每一个都 10+),但它有效。我将使用一个 javascript hashmap 来保存所有数据,并允许我使用一些参数从同一个函数中访问它。如果我无事可做:)
    • 函数定义一次,在配置中引用即可。看here
    • 我知道,谢谢。这有点棘手,因为我正在使用 smarty 来构建图表数据,让图表访问它(将各种字段设置为 valueFields)和格式化函数......
    猜你喜欢
    • 1970-01-01
    • 2013-10-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-02-07
    • 2010-09-21
    相关资源
    最近更新 更多