Amcharts：如何在 balloonFunction 中传递标题？答案

【问题标题】：Amcharts: How to pass title in balloonFunction?Amcharts：如何在 balloonFunction 中传递标题？
【发布时间】：2018-07-27 05:21:29
【问题描述】：

我想在传递数据之前对其进行格式化，它将显示为工具提示。为此，我使用balloonFunction 和compareGraphBalloonFunction

        "stockGraphs": [
          {
            "id": "g1",
            "valueField": "value",
            "comparable": true,
            "compareField": "value",
            "balloonFunction": this.ballonRender,
            "compareGraphBalloonFunction": this.ballonRender,
            // This is works
            //"balloonText": [[title]]
            //"compareGraphBalloonText": [[title]]
          }]

但是当我将标题作为参数发送到我的 ballonRender 函数时，我在 title 对象中找不到显示我的图形名称的属性。

  ballonRender(title) {
    let sign = (title["percents"]["value"]>0) ? "+" : "-";
    let values = (title["values"]["value"]).toFixed(4)
    let percentage =  (title["percents"]["value"]).toFixed(2)
    let newTitle = 'Product <b>%s</b> (%s %s%)'.format(values, sign, percentage)
    return newTitle
  },

如果我在ballonRender 函数中打印title，我会观察到以下对象。

category : Mon Oct 02 2017 00:00:00 GMT+0800 (Гонконг, стандартное время) {}
dataContext : amCategoryIdField: "1506873600000"
dataContext : {__ob__: Observer}
date : Mon Oct 02 2017 08:00:00 GMT+0800 (Гонконг, стандартное время) {}
rawData : (5) [{…}, {…}, {…}, {…}, {…}]
valueAbsHigh : 1.0477245421
valueAverage : 1.04665801056
valueClose : 1.0466455011
valueCount : 5
valueHigh : 1.0477245421
valueLow : 1.0451341501
valueOpen : 1.0451341501
valueSum : 5.2332900528
graph : {id: "g1", valueField: "value", comparable: true, compareField: "value", balloonFunction: ƒ, …}
index : 40
isNegative : false
percents : {value: 4.664550109999993, percents: 23.826681846132807, total: 339.27455273}
serialDataItem : {dataContext: {…}, category: Mon Oct 02 2017 00:00:00 GMT+0800 (Гонконг, стандартное время), time: 1506873600000, axes: {…}, x: {…}}
values : {value: 1.0466455011, percents: 23.826681846132807, total: 4.3927455273}
x : 608
y : 359.7633884380001

我不明白为什么balloonText 中的[[title]] 可以正常工作，但是当我将此参数传递给函数时，我无法检索图表标题。

我也对ballonFunction 中的输入参数感到有些困惑。如果您共享具有解释和最佳实践的资源，那就太好了。

【问题讨论】：

标签： javascript amcharts amstock

【解决方案1】：

标题来自graph object 本身。在股票图表的情况下，图表继承了dataSet 的标题，但填充了相同的属性。您所要做的就是访问作为第二个参数传递给 balloonFunction 的图形对象（您的函数中目前没有该参数），以获取标题数据：

    "balloonFunction": function(graphDataItem, graph) {  
      return "<u>" + graph.title + "</u>: <b>" + graphDataItem.values.value + "</b>";
    },
    "compareGraphBalloonFunction": function(graphDataItem, graph) {  
      return "<u>" + graph.title + "</u>: <b>" + graphDataItem.values.value + "</b>";
    }

Demo

【讨论】：