Question

我正在使用Highcharts-more中的columnrange类型。默认数据标签格式化程序将最小/最大数据放在范围的两端，这很不错。

有没有办法在每个点附加另一个标签？（例如：数据名称，就在栏的中间）

请参阅我的工作： JSFiddle

这是一个有生命范围的家谱。我想在条形图的中心显示工具提示中显示的名称。

（仅供参考我尝试使用渲染器使图表超载图表：它有效...但是文本附加到图表上，而不是点，并且缩放它们使它们保持原位，而点移动了。可能有办法将文本标签附加到图表onLoad事件的每个点上？）

谢谢。

$(function () {

$('#container').highcharts({

    chart: {
        type: 'columnrange',
        inverted: true,
        marginLeft: 40,
        zoomType: 'xy'
    },

    title: {
        text: 'My family tree'
    },

    xAxis: {

        labels: {
            enabled: false
        },
        min: 0,
        max: 10
    },

    yAxis: {
        type: 'datetime',
        min: new Date().setYear(1900).valueOf(),
        max: new Date().valueOf(),
        title: {
            text: 'Year'
        },
        endOnTick: false
    },

    legend: {
        enabled: false
    },

    plotOptions: {
        columnrange: {
            grouping: false,
            pointPadding: 0,
            dataLabels: {
                enabled: true,
                useHTML: true,
                formatter: function () {
                    if (new Date().setHours(0, 0, 0, 0) !== new Date(this.y).setHours(0, 0, 0, 0)) return '<span style="color:black">' + Highcharts.dateFormat('%Y', this.y) + '</span>';
                    else return '';
                }
            }
        }
    },

    tooltip: {
        headerFormat: '{series.name}<br/>',
        formatter: function () {
            var l = this.point.name + '<br/>' + Highcharts.dateFormat('%e/%m/%Y', this.point.low);
            if (new Date().setHours(0, 0, 0, 0) !== new Date(this.point.high).setHours(0, 0, 0, 0)) l += '<br/>' + Highcharts.dateFormat('%e/%m/%Y', this.point.high);
            return l;
        }
    },

    series: [{
        color: 'rgb(100,100,255)',
        pointWidth: 150,
        data: [{
            name: 'Yann B',
            low: Date.UTC(1976, 1, 27),
            high: new Date().valueOf(),
            x: 1 * 10 / 2
        }]
    }, {
        color: 'rgb(150,150,255)',
        pointWidth: 70,
        data: [{
            name: 'Jean-Yves B',
            low: Date.UTC(1947, 3, 26),
            high: Date.UTC(2006, 2, 10),
            x: 1 * 10 / 4
        }, {
            name: 'Josiane M',
            low: Date.UTC(1946, 8, 21),
            high: Date.UTC(1998, 11, 26),
            x: 3 * 10 / 4
        }]
    }, {
        color: 'rgb(200,200,255)',
        pointWidth: 30,
        data: [{
            name: 'Guillaume B',
            low: Date.UTC(1907, 7, 4),
            high: Date.UTC(1988, 1, 11),
            x: 1 * 10 / 8
        }, {
            name: 'Marie-Jeanne S',
            low: Date.UTC(1911, 7, 17),
            high: Date.UTC(1986, 2, 3),
            x: 3 * 10 / 8
        }, {
            name: 'Joseph M',
            low: Date.UTC(1921, 3, 11),
            high: Date.UTC(1996, 4, 23),
            x: 5 * 10 / 8
        }, {
            name: 'Marie K',
            low: Date.UTC(1925, 4, 4),
            high: new Date().valueOf(),
            x: 7 * 10 / 8
        }]
    }]

});

});

Answer 1

在这里使用“内部”的适当性确实很重要。但我不得不绕过其使用固有的错误（见最后回答的评论）。

这是一段适用于数据标签的代码。工具提示仍然存在zIndex问题，我将尽快发布更完整的解决方案。 http://jsfiddle.net/SineDie/TREwr/1/

dataLabels: {
        inside: true,
        enabled: true,
        useHTML: true,
        formatter: function () {
             if (this.y === this.point.low) {
                    var l = '<div style="text-align:center;color:black;width:' + (this.point.plotLow - this.point.plotHigh) + 'px">' 
                        + Highcharts.dateFormat('%Y', this.point.low) + ' - '
                        + this.point.name;
                    // to avoid marking as dead if still living... 
                    if (new Date().setHours(0, 0, 0, 0) !== new Date(this.point.high).setHours(0, 0, 0, 0))
                         l += ' - ' + Highcharts.dateFormat('%Y', this.point.high);
                    l += '</div>';
                    return l;
                }
             else return '';
        }
   }

Answer 2

我对格式化程序的功能进行了一些修改。设置datalabels inside属性true并将数据名称附加到point的{{1}}值。

high

Highcharts：列范围栏内的标签

2 个答案: