2015-06-03 3 views
1

Я новичок в amCharts, пытаясь создать довольно простую линейку шагов.Amcharts: значения интерполяции шаговых линий, отображение шара интерполированного значения

У меня есть данные, где значение остается постоянным в течение длительного времени, и регистрирует лишь изменения значения, например:

{ 
    "timeOfDay": "18:20", 
    "value": 100 
}, { 
    "timeOfDay": "19:40", 
    "value": 80 
}, { 
    "timeOfDay": "21:40", 
    "value": 20 
}, { 
    "timeOfDay": "22:40", 
    "value": 50 
} // and so on 

Диаграмма должна провести горизонтальную линию до следующей точки изменения, а затем снова до следующего и так далее, что мне удалось сделать. Однако на данный момент он показывает только текст воздушного шара в точках данных, а не там, где находится курсор, например: amcharts balloon at wrong place

Здесь я нахожусь вокруг 20:15, хотя скриншот не захватил мой курсор. Текст аэростата отображается в ближайшей точке данных. Я бы хотел, чтобы текст воздушного шара отображался либо на моем курсоре, либо над графиком на месте моего курсора, и чтобы он показывал время в том месте, где находится курсор.

Я знаю, я знаю может генерировать новые точки данных между существующими, но скорее не будет, так как это будет довольно тяжелой операцией, так как я хочу, чтобы она показывала время с точностью до одной секунды - это были бы тысячи точек данных в час , и я верю, что у amCharts есть опция интерполяции для скрытых где-то времени - я попытался найти docs/google для такой опции, но пока не нашел ее.

EDIT: Текущий график код здесь: http://pastebin.com/BEZxgtCb

UPDATE: Сумел извлечь время со следующими функциями и прикреплением слушателя событий для объекта chartCursor - до сих пор не может получить его, чтобы показать где-нибудь еще, но на предопределенные точки на графике.

var parseDate = function(dateObj) { 
    return dateObj.getHours() + ":" + dateObj.getMinutes() + ":" + dateObj.getSeconds(); 
} 

var handleMove = function(event) { 
    var time = event.chart.categoryAxis.coordinateToDate(event.x); 
    event.chart.graphs[0].balloonText = parseDate(time); 
} 

ответ

1

аэростат отображалась только на фактических точек данных, которые означают, что вам нужно, чтобы ввести их вручную, чтобы показать шар через «интерполированное» время. После прохождения ваших данных вычисляется расстояние между предыдущими точками и вводится количество минут между ними.

 var prevTime = undefined; 
     var prevValue = undefined; 
     var interpolate = []; 
     for (var i1 = 0; i1 < chart.dataProvider.length; i1++) { 
      var item = chart.dataProvider[i1]; 
      var curTime = AmCharts.stringToDate(item.timeOfDay,"JJ:NN") 
      var curVal = item.value; 

      if (prevTime) { 
       var distance = (Number(curTime) - Number(prevTime))/1000/60; 
       for (var i2 = 0; i2 < distance; i2++) { 
        var newDate = new Date(prevTime); 
        newDate.setMinutes(prevTime.getMinutes() + i2); 

        if (Number(newDate) < Number(curTime)) { 
         interpolate.push({ 
          timeOfDay: AmCharts.formatDate(newDate,"JJ:NN"), 
          value: prevValue 
         }); 
        } 
       } 
      } 

      // NEW ONE 
      interpolate.push(item); 

      // FOR NEXT TIME 
      prevTime = curTime; 
      prevValue = curVal; 
     } 
     chart.dataProvider = interpolate; 

К сожалению, нет возможности достичь этой функциональности.

+0

Это немного разочаровывает:/Я попробую это завтра и посмотрю, насколько это лагги. Спасибо, тем не менее! – Fissio

Смежные вопросы