2013-04-16 2 views
1

하이 차트를 사용하여 해킹당한 간트 차트에 대한 툴팁이 제대로 작동하는 것 같습니다. 내가 UnixTime을 사용하고, 그 어떻게 든 도구 설명을 던지는 것 같다해킹 된 간트 차트에 highcharts 툴팁이 제대로 작동하지 않습니다.

http://jsfiddle.net/highcharts/r6emu/

: 나는 여기 -에서 highcharts 팀에서 제공하는 간트 차트를 사용했다. 여기 -이 :

http://jsfiddle.net/bootkick/NFS5M/

// Define tasks 
var tasks = [{ 
"name": "a", 
    "intervals": [{ 
    "from": 1366005607000, 
     "to": 1366006490000 
}] 
}, { 
"name": "b", 
    "intervals": [{ 
    "from": 1366059607000, 
     "to": 1366061858000 
}, { 
    "from": 1366056006000, 
     "to": 1366058223000 
}, { 
    "from": 1366047007000, 
     "to": 1366049299000 
}, { 
    "from": 1366034407000, 
     "to": 1366036682000 
}, { 
    "from": 1366030808000, 
     "to": 1366033050000 
}, { 
    "from": 1366027208000, 
     "to": 1366029512000 
}, { 
    "from": 1366018209000, 
     "to": 1366021296000 
}] 
}, { 
"name": "c", 
    "intervals": [{ 
    "from": 1366018209000, 
     "to": 1366019966000 
}] 
}, { 
"name": "d", 
    "intervals": [{ 
    "from": 1366005607000, 
     "to": 1366047612000 
}, { 
    "from": 1366002007000, 
     "to": 1366002202000 
}] 
}]; 


// re-structure the tasks into line seriesvar series = []; 
var series = []; 
$.each(tasks.reverse(), function (i, task) { 
var item = { 
    name: task.name, 
    data: [] 
}; 
$.each(task.intervals, function (j, interval) { 
    item.data.push({ 
     x: interval.from, 
     y: i, 
     label: interval.label, 
     from: interval.from, 
     to: interval.to 
    }, { 
     x: interval.to, 
     y: i, 
     from: interval.from, 
     to: interval.to 
    }); 

    // add a null value between intervals 
    if (task.intervals[j + 1]) { 
     item.data.push(
     [(interval.to + task.intervals[j + 1].from)/2, null]); 
    } 

}); 

series.push(item); 
}); 


// create the chart 
var chart = new Highcharts.Chart({ 

chart: { 
    renderTo: 'container' 
}, 

title: { 
    text: 'Daily activities' 
}, 

xAxis: { 
    type: 'datetime' 
}, 

yAxis: { 
    tickInterval: 1, 
    labels: { 
     formatter: function() { 
      if (tasks[this.value]) { 
       return tasks[this.value].name; 
      } 
     } 
    }, 
    startOnTick: false, 
    endOnTick: false, 
    title: { 
     text: 'Activity' 
    }, 
    minPadding: 0.2, 
    maxPadding: 0.2 
}, 

legend: { 
    enabled: false 
}, 

tooltip: { 
    formatter: function() { 
     return '<b>' + tasks[this.y].name + '</b><br/>' + Highcharts.dateFormat('%H:%M', this.point.options.from) + 
      ' - ' + Highcharts.dateFormat('%H:%M', this.point.options.to); 
    } 
}, 

plotOptions: { 
    line: { 
     lineWidth: 9, 
     marker: { 
      enabled: false 
     }, 
     dataLabels: { 
      enabled: true, 
      align: 'left', 
      formatter: function() { 
       return this.point.options && this.point.options.label; 
      } 
     } 
    } 
}, 

series: series 

}); 

그래서 어떤 경우 명백한 용서 자바 스크립트와 Highcharts 비교적 새로운 오전.

답변

1

나는 그것을 알아 냈다. 문제는 이름, 카테고리 내의 시작에서 끝까지의 쌍이 오름차순이 아님을 나타냅니다. 툴팁이 올바르게 작동하려면 오름차순으로 정렬해야합니다. 다소 이상합니다.

관련 문제