amCharts顯示翻轉氣球中的值更改

實現獲取以前的值時出現問題。例如：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建議我應該顯示「test：200（+100）」和「test2'2009-09-4」test2：600（-100）「

In現場的例子沒有找到解決方案。

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", 
});

來源

2015-12-09 Tom910

您可以使用圖形的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不會被調用。

來源

2015-12-09 14:14:01 martynasma

感謝您的想法 – Tom910

可以使用自定義功能氣球代替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/

來源

2015-12-09 14:02:56 admax

amCharts顯示翻轉氣球中的值更改

回答

相關問題