javascript - amCharts显示翻转气球中的值变化

获得先前值的实现存在问题。例如:

[ {
  "date": "2009-09-1",
  "test": 100,
  "test2": 900
}, {
  "date": "2009-09-2",
  "test": 200,
  "test2": 800
}, {
  "date": "2009-09-3",
  "test": 300,
  "test2": 700
}, {
  "date": "2009-09-4",
  "test": 400,
  "test2": 600
}, {
  "date": "2009-09-5",
  "test": 500,
  "test2": 500
} ]

我需要一些数据来获取上一个点的每个点的值，从当前值中减去或增加。例如，在“测试” 2009-09-2建议我应该显示“测试:200(+100)”和“测试2” 2009-09-4“测试2:600(-100)”

在现场的示例中找不到解决方案。

http://jsfiddle.net/Ltv1yLn3/2/

var chartData = [{"date":"2009-09-1","test":100, "test2": 900}, {"date":"2009-09-2","test":200, "test2": 800}, {"date":"2009-09-3","test":300, "test2": 700}, {"date":"2009-09-4","test":400, "test2": 600}, {"date":"2009-09-5","test":500, "test2": 500}];

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "dataDateFormat": "YYYY-MM-DD",

    "legend": {
        "useGraphSettings": true,
        "align": "center",
        "valueAlign": "left",
        "valueText": "[[value]] ([[percents]]%)"
    },
    "dataProvider": chartData,
    "graphs": [
        {
            "lineColor": "#000000",
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 3,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "useLineColorForBulletBorder": true,
            "title": "Test 1",
            "valueField": "test",
            "balloonText": "[[title]]: [[value]] (-+100)"
        },
        {
            "lineColor": "#111111",
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 3,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "useLineColorForBulletBorder": true,
            "title": "Test 2",
            "valueField": "test2","balloonText": "[[title]]: [[value]] (-+100)"
        },
    ],
    "chartCursor": {
        "valueLineEnabled": true,
        "valueLineBalloonEnabled": true,
        "valueLineAlpha": 0.5,
        "fullWidth": true,
        "cursorAlpha": 0.05
    },
    "categoryField": "date",
});

最佳答案

您可以使用图表的 balloonFunction 自动计算更改。

即:

"graphs": [ {
  // ...
  "balloonText": "[[title]]",
  "balloonFunction": balloonFunction
}, {
  // ...
  "balloonText": "[[title]]",
  "balloonFunction": balloonFunction
} ]

有效的balloonFunction是这样的:

function balloonFunction( item, graph ) {
  // init variables
  var chart = graph.chart;
  var key = graph.valueField;
  var data = chart.dataProvider;
  var text = graph.title + ": " + data[ item.index ][ key ];

  // add change if it's not the first item
  if ( item.index ) {
    var change = data[ item.index ][ key ] - data[ item.index - 1 ][ key ]
    var sign = change > 0 ? "+" : "";
    text += " (" + sign + change + ")";
  }
  return text;
}

这是上面更新的小提琴:

http://jsfiddle.net/Ltv1yLn3/3/

附言请注意，即使我们使用balloonFunction格式化气球内容，仍然需要balloonText，因为没有它，balloonFunction不会被调用。

关于javascript - amCharts显示翻转气球中的值变化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34180314/