amCharts显示翻转气球的价值变化

时间:2015-12-09 13:43:32

标签: 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)"和' test2' 2009-09-4" test2: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",
});

2 个答案:

答案 0 :(得分:4)

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

即:

 = simple_form_for @vacancy do |f| 
   ... regular fields that are saving correctly ...
   .vacancyschedules
     = f.simple_fields_for :vacancyschedules do |vacancyschedule|
       =render "vacancyschedule_fields", f: vacancyschedule
    .links
      =link_to_add_association 'add schedule', f, vacancyschedules

工作"graphs": [ { // ... "balloonText": "[[title]]", "balloonFunction": balloonFunction }, { // ... "balloonText": "[[title]]", "balloonFunction": balloonFunction } ] 就是这样:

balloonFunction

以上是您更新的小提琴:

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

P.S。请注意,即使我们使用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; } 格式化气球内容,仍然需要balloonFunction,因为如果没有balloonText则不会被调用。

答案 1 :(得分:1)

您可以使用自定义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/