1

我使用 highcharts 破解的甘特图的工具提示似乎无法正常工作。我从这里使用了 highcharts 团队提供的甘特图:

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

我正在使用 UnixTime,这似乎以某种方式抛弃了工具提示。这里-:

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

});

我对 Javascript 和 Highcharts 比较陌生,所以如果有的话,请原谅。

4

1 回答 1

1

我想到了。问题是名称/类别中的从、到时间戳对不是按升序排列的。为了使工具提示正常工作,它们需要按升序排列,这有点奇怪。

于 2013-04-16T03:19:25.937 回答