Highcharts：列標題欄內的標籤

Question

我使用Highcharts-more的列標題類型。 默認數據標籤格式化程序將最小/最大數據放在範圍的兩端，這很好。

有沒有辦法給每個點附加另一個標籤？ （例如：數據名稱，就在欄的中間）

請看到我的工作在： 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

我對格式器的操作做了一些修改。設置datalabelsinside屬性true並將數據名附加到point的high值。

dataLabels: { 
    inside:true, 
    enabled: true, 
    useHTML: true, 
    formatter: function() { 
     if (new Date().setHours(0, 0, 0, 0) !== new Date(this.y).setHours(0, 0, 0, 0)) { 
      if (this.y == this.point.high){ 
       return '<span style="color:black">' + Highcharts.dateFormat('%Y', this.y) +' - '+ this.point.name + '</span>'; 
      } 
      return '<span style="color:black">' + Highcharts.dateFormat('%Y', this.y) + '</span>'; 
     } 
     else return ''; 
    } 
} 

Answer 2

在這裏的「內部」禮儀的使用確實是相關的。但是我不得不繞過它使用固有的錯誤（參見對最後一個答案的評論）。

這是一段適用於數據標籤的代碼。工具提示仍然存在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 ''; 
     } 
    }