0

我正在尝试将数据添加到 highcharts 中的工具提示中。我使用 CSV 导入数据，但对于此代码，我将数据放在 var 中。通常我的数据格式为：CSV 中的名称、开始日期、结束日期。现在我想尝试使用：Name、startDate、endDate、eventType、unitType。

我试图弄清楚如何让我的数据 eventType 和 unitType 显示在工具提示中。我确实尝试将数据推送到 series.data.composition，但我想我做错了！

作为奖励，只有 1 天宽的日期似乎没有显示，但它们在那里，太薄了，看不到，有人知道解决方案吗？我围绕这个主题研究了一段时间，但似乎没有帮助。

这是我的JSFiddle代码。

var options = {
    chart: {
        zoomType: 'y',
        borderWidth: '0',
        borderRadius: '15',
        renderTo: 'container',
        inverted: true,
        backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, 'rgb(44, 44, 58)'],
                [1, 'rgb(62, 62, 62)']
            ]
        },
        plotBackgroundColor: 'rgba(255, 255, 255, .9)'
    },
    tooltip: {
        useHTML: true,
        formatter: function () {
            var point = this.point;
            return '<table><tr>' + point.category + '</tr><tr><td style="color:#00CC00">Start:</td><td style="text-align: right">' + Highcharts.dateFormat('%b %e, %Y', point.low) + '</td></tr><tr><td style="color:#FF0000">Finish:</td><td>' + Highcharts.dateFormat('%b %e, %Y', point.high) + '</td></tr><tr><td>Unit:</td> <td></tr></table>'
        }
    },
    subtitle: {
        text: 'MTC'
    },
    credits: {
        text: 'MTC',
        href: 'myLink'
    },
    legend: {
        enabled: true
    },
    title: {
        text: 'Calendar'
    },
    xAxis: {
        categories: []
    },
    plotOptions: {
        series: {
            grouping: false
        }
    },
    yAxis: {
        type: 'datetime',
        minRange: 0,
        startOnTick: false,
        endOnTick: false,
        title: {
            text: 'yAxis'
        }
    },
    series: []
},
categories = [];;


var data = "Soldier 1,12/1/2013,12/10/2013,Training 1,Unit 1,4/8/2014,4/10/2014,Training 3,Unit 7\nSoldier 2,4/15/2013,4/18/2013,Training 2,Unit 2,4/20/2014,4/23/2014,Training 4,Unit 8\nSoldier 3,6/3/2013,6/3/2013,Training 31,Unit 3,8/12/2014,8/13/2014,Training 66,Unit 9,6/15/2013,6/22/2013,Train 92,Unit 44\nSoldier 4,10/10/2013,10/12/2013,Training 9,Unit 4,10/13/2013,10/19/2013,Training 6,Unit 10\nSoldier 5,9/20/2013,9/24/2013,Training 5,Unit 5";
var lines = data.split('\n');

$.each(lines, function (lineNo, line) {
    var items = line.split(','),
        iLen = items.length,
        series = {
            type: 'columnrange',
            data: [],
            name: items[0],
            composition: []
        };

    categories.push(items[0]);
    for (var i = 1; i < iLen; i += 2) {
        var from = (new Date(items[i])).getTime(),
            to = (new Date(items[i + 1])).getTime();
        if (!isNaN(from) && !isNaN(to)) {
            series.data.push([lineNo, from, to]);
        }
    };
    options.series.push(series);
});

options.xAxis.categories = categories;

var chart = new Highcharts.Chart(options);
4

1 回答 1

1

您对新数据推送和格式化程序的摆弄：http: //jsfiddle.net/WXLaN/2/

需要注意的关键是数据推送循环：

for (var i = 1; i < iLen; i += 4) {
    var from = (new Date(items[i])).getTime(),
        to = (new Date(items[i + 1])).getTime();
    var point = {
        x: lineNo,
        low: from,
        high: to,
        event: (items[i + 2]),
        unit: (items[i + 3])
    };
    if (!isNaN(from) && !isNaN(to)) {
        series.data.push(point);
    }
};

因为数据行现在是 4 个数据块，所以 inc 设置为 4。为了使用自定义数据字段，您需要推入一个包含所需信息和附加信息的对象。您需要的信息是 X，低和高。额外的信息是事件和单位。所有这些东西都在 point.options 对象的格式化程序中可用，并由您在数据推送循环中提供的相同对象引用。

于 2013-09-20T21:02:28.173 回答