Highcharts（grouped_category樣式）和工具提示格式化程序不工作

我想建立一個複雜的儀表板，它顯示項目階段選項（按照子階段分組）和每個里程碑。 Same as the attached image Highcharts（grouped_category樣式）和工具提示格式化程序不工作

我遇到的問題是如下：

當我將鼠標懸停在里程碑（金金剛石 - 散點圖），我需要顯示一個特定的值，它是里程碑名稱（均未X或y軸）。我使用格式化函數，但它仍然不起作用（就好像它不是在第一個地方開火）。
另一部分與組的造型有關。我需要將一些背景顏色應用到組中，調整組的長度（現在文本不適合，特別是在較低的屏幕分辨率下）。我沒有找到兩種方法。

我發佈了所有代碼，因爲我預計會有一些錯誤。所以感謝任何幫助。

<script type="text/javascript"> 
 
$(function() { 
 
     $('#container').highcharts({ 
 

 
      chart: { 
 
       type: 'columnrange', 
 
\t \t \t \t inverted: true 
 
      }, 
 
      title: { 
 
       text: 'Project Name' 
 
      }, 
 
\t \t \t subtitle: { 
 
\t \t \t \t text: 'Phasen und Meilensteine des Vergabeverfahrens' 
 
\t \t \t }, 
 
      xAxis: { 
 
\t \t \t \t labels: { \t \t \t \t 
 
\t \t \t \t \t groupedOptions: [{ 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t style: { 
 
\t \t \t \t \t \t \t 'fontSize': '1.2em', 
 
\t \t \t \t \t \t \t 'backgroundColor' : '#f7f7f7', 
 
\t \t \t \t \t \t \t color: 'red' 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t }, { 
 
\t \t \t \t \t \t rotation: 0, // rotate labels for a 2nd-level 
 
\t \t \t \t \t \t align: 'left' 
 
\t \t \t \t \t }], 
 
\t \t \t \t \t rotation: 0 // 0-level options aren't changed, use them as always 
 
\t \t \t \t }, 
 
       categories: [{ 
 
\t \t \t \t \t name: 'Phase 1<br/>Vorbereitung', 
 
\t \t \t \t \t categories: ["some test text ", 
 
\t \t \t \t \t "some test text ", 
 
\t \t \t \t \t "some test text ", 
 
\t \t \t \t \t "some test text "] 
 
\t \t \t \t }, { 
 
\t \t \t \t \t name: "Phase 2<br/>Teilnahmewettbewerb", 
 
\t \t \t \t \t categories: ["some test text ", 
 
\t \t \t \t \t "some test text ", 
 
\t \t \t \t \t "some test text ", 
 
\t \t \t \t \t "some test text "] 
 
\t \t \t \t }, { 
 
\t \t \t \t \t name: "Phase 3<br/>Angebotsphase", 
 
\t \t \t \t \t categories: ["some test text ", 
 
\t \t \t \t \t "some test text ", 
 
\t \t \t \t \t "some test text ", 
 
\t \t \t \t \t "some test text "] 
 
\t \t \t \t }, { 
 
\t \t \t \t \t name: "Phase 4<br/>Vergabeentscheidung", 
 
\t \t \t \t \t categories: ["some test text ", 
 
\t \t \t \t \t "some test text ", 
 
\t \t \t \t \t "some test text ", 
 
\t \t \t \t \t "some test text "] 
 
\t \t \t \t }] 
 
      }, 
 

 
      yAxis: { 
 
       type: 'datetime', 
 
\t \t \t \t floor: Date.UTC(2014, 9, 1), 
 
\t \t \t \t ceiling: Date.UTC(2015, 12, 1), 
 
\t \t \t \t dateTimeLabelFormats: { 
 
\t \t \t \t \t month: '%b %Y' 
 
\t \t \t \t }, 
 
\t \t \t \t labels: { 
 
        formatter: function() { 
 
         return Highcharts.dateFormat('%b %Y', this.value); 
 
        } 
 
       } 
 
      }, 
 
      legend: { 
 
       enabled: true 
 
      }, 
 
      plotOptions: { 
 
\t \t \t \t series: { 
 
\t \t \t \t \t pointWidth: 34, 
 
\t \t \t \t \t groupPadding: 0 \t \t \t \t \t 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t series: [{ 
 
\t \t \t \t type: 'columnrange', 
 
\t \t \t \t grouping: false, 
 
\t \t \t \t pointPadding: 0, 
 
       name: 'Phase 1- Vorbereitung', 
 
       data: [ 
 
       ["some test text ", Date.UTC(2014, 9, 1), Date.UTC(2014, 12, 1)], 
 
       ["some test text ", Date.UTC(2014, 11, 1), Date.UTC(2015, 2, 1)], 
 
       ["some test text ", Date.UTC(2014, 10, 1), Date.UTC(2014, 12, 15) ], 
 
\t \t \t \t ["some test text ", Date.UTC(2014, 12, 16), Date.UTC(2015, 1, 15)], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null] 
 
      ], 
 
\t \t \t tooltip: { 
 
\t \t \t \t headerFormat: '<span style="font-weight: bold; color: {series.color}">{point.x}</span><br>', 
 
\t \t \t \t pointFormat: '{point.low:%e. %b %Y} - {point.high:%e. %b %Y}' 
 
\t \t \t }}, 
 
\t \t \t { 
 
\t \t \t \t type: 'columnrange', 
 
       name: 'Phase 2 - Teilnahmewettbewerb', 
 
\t \t \t \t grouping: false, 
 
\t \t \t \t pointPadding: 0, 
 
       data: [ 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
       ["some test text ", Date.UTC(2015, 1, 16), Date.UTC(2015, 2, 15)], 
 
       ["some test text ", Date.UTC(2015, 1, 16), Date.UTC(2015, 2, 15)], 
 
\t \t \t \t ["some test text ", Date.UTC(2015, 2, 16), Date.UTC(2015, 3, 15)], 
 
\t \t \t \t ["some test text ", Date.UTC(2015, 3, 1), Date.UTC(2015, 3, 15)], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null] 
 
      ], 
 
\t \t \t tooltip: { 
 
\t \t \t \t headerFormat: '<span style="font-weight: bold; color: {series.color}">{point.x}</span><br>', 
 
\t \t \t \t pointFormat: '{point.low:%e. %b %Y} - {point.high:%e. %b %Y}' 
 
\t \t \t }}, 
 
\t \t \t { 
 
\t \t \t \t type: 'columnrange', 
 
       name: 'Phase 3 - Angebotsphase', 
 
\t \t \t \t grouping: false, 
 
\t \t \t \t pointPadding: 0, 
 
\t \t \t \t 
 
       data: [ 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
       [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t ["some test text ", Date.UTC(2014, 10, 1), Date.UTC(2015, 2, 1)], 
 
\t \t \t \t ["some test text ", Date.UTC(2015, 2, 1), Date.UTC(2015, 3, 15)], 
 
\t \t \t \t ["some test text ", Date.UTC(2015, 3, 16), Date.UTC(2015, 4, 1)], 
 
\t \t \t \t ["some test text ", Date.UTC(2015, 4, 16), Date.UTC(2015, 5, 15)], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null] 
 
\t \t \t \t 
 
      ], 
 
\t \t \t tooltip: { 
 
\t \t \t \t headerFormat: '<span style="font-weight: bold; color: {series.color}">{point.x}</span><br>', 
 
\t \t \t \t pointFormat: '{point.low:%e. %b %Y} - {point.high:%e. %b %Y}' 
 
\t \t \t }}, 
 
\t \t \t { 
 
\t \t \t \t type: 'columnrange', 
 
       name: 'Phase 4 - Vergabeentscheidung', 
 
\t \t \t \t grouping: false, 
 
\t \t \t \t pointPadding: 0, 
 
       data: [ 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
       [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t [null, null, null], 
 
\t \t \t \t ["some test text ", Date.UTC(2015, 5, 1), Date.UTC(2015, 5, 15)], 
 
\t \t \t \t ["some test text ", Date.UTC(2015, 4, 16), Date.UTC(2015, 6, 1)], 
 
\t \t \t \t ["some test text ", Date.UTC(2015, 5, 16), Date.UTC(2015, 6, 15)] 
 
      ], 
 
\t \t \t tooltip: { 
 
\t \t \t \t headerFormat: '<span style="font-weight: bold; color: {series.color}">{point.x}</span><br>', 
 
\t \t \t \t pointFormat: '{point.low:%e. %b %Y} - {point.high:%e. %b %Y}' 
 
\t \t \t }}, 
 
\t \t \t { 
 
\t \t \t \t type: 'scatter', 
 
       name: 'Meilensteine', 
 
\t \t \t \t color: 'gold', 
 
\t \t \t \t marker: { 
 
\t \t \t \t \t symbol: 'diamond', 
 
\t \t \t \t \t radius: 10 
 
\t \t \t \t }, 
 
\t \t \t \t grouping: false, 
 
\t \t \t \t pointPadding: 0, 
 

 
       data: [ 
 
\t \t \t \t {y: Date.UTC(2014, 9, 1), value: "M1 Projektstart"}, 
 
\t \t \t \t {y: Date.UTC(2014, 12, 15), value:"M2.1 Finalisierung Dokumente TN-Wettbewerb"}, 
 
\t \t \t \t {y: Date.UTC(2015, 1, 1), value:"M3.1"}, 
 
       {y: Date.UTC(2015, 1, 15), value:"M2"}, 
 
\t \t \t \t {y: Date.UTC(2015, 2, 15), value:"M5"}, 
 
\t \t \t \t {y: Date.UTC(2015, 3, 1), value:"M3"}, 
 
\t \t \t \t {y: Date.UTC(2015, 3, 16), value:"M4"}, 
 
\t \t \t \t {y: Date.UTC(2015, 4, 1), value:"M5.1"}, 
 
\t \t \t \t {y: Date.UTC(2015, 3, 1), value:"M5"}, 
 
\t \t \t \t {y: Date.UTC(2015, 4, 1), value:"M7"}, 
 
\t \t \t \t {y: Date.UTC(2015, 5, 1), value:"M8"} 
 
\t \t \t \t 
 
      ], 
 
\t \t \t tooltip: { 
 
\t \t \t 
 
\t \t \t \t formatter: function() { 
 
\t \t \t \t \t //return alert(this); 
 
\t \t \t \t \t return 'dump stuff not working'; 
 
\t \t \t \t \t //return 'The value for <b>' + this.y + '</b> is <b>' + this.value + '</b>, in series '+ this.series.name; 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t }} 
 
\t \t \t ], 
 
\t \t \t exporting: { 
 
\t \t \t \t sourceWidth: 2000, 
 
\t \t \t \t sourceHeight: 1200 
 
\t \t \t } 
 
     }); 
 
}); 
 
\t \t </script>

來源

2015-06-17 Zeina

1）有沒有像這樣series.tooltip.formatter選項。只有series.tooltip.pointFormat或其他格式。例如：

tooltip: { 
    pointFormat: "{point.value}" 
}

實施例：http://jsfiddle.net/TFhd7/367/

2）我認爲這是連接到Highcharts 2.x和4.x的之間的設計變更詳見this ticket。例如設置爲labels.x至-5：http://jsfiddle.net/TFhd7/368/

關於背景 - 它不支持在插件中，您需要自行渲染背景。我建議使用chart.renderer。請參閱API。

來源

2015-06-17 09:47:15

謝謝，我制定了工具提示的事情。我試圖將它添加到headerformat，但沒有奏效。我設法以所需的格式將其添加到點格式中。如果我遇到任何問題，我會在背景問題上工作，並讓你知道。非常感激。 – Zeina

嗨，Pawel，請問如何設置子類別向左而不是右對齊。當我改變對齊方式時，它不起作用，並且整個頁面視圖被破壞（主要類別被分組在頁面的左上角，感謝你的幫助 – Zeina

我們可以只針對你的問題提供一個線程嗎？決定使用[github ]（https://github.com/blacklabel/grouped_categories/issues/62）或此主題。 –

Highcharts（grouped_category樣式）和工具提示格式化程序不工作

回答

相關問題