amCharts显示滚动气球中的值变化

amCharts show value change in rollover balloon

本文关键字：变化 气球 显示 滚动 amCharts      更新时间：2023-09-26

获取上一个值的实现存在问题。例如：

[ {
  "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）"answers"测试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就不会被调用。

您可以使用自定义baloon函数而不是baloonText:

function adjustBalloonText(graphDataItem, graph){
    var currentValue = graphDataItem.values.value;
    var previousValue = // calculate it somehow (probably by searching in the original data source)
    return currentValue + " (" + previousValue + ")";
}

请参阅http://www.amcharts.com/tutorials/updating-balloon-tool-tip-text-fly/

相关文章：