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

Question

我正在尝试构建一个复杂的仪表板，它显示项目阶段选项（按子阶段分组）和每个阶段的里程碑。

我遇到的问题如下：

当我将鼠标悬停在里程碑（金钻 - 散点图）上时，我需要显示一个特定值，即里程碑名称（既不是 x 轴也不是 y 轴）。我使用了格式化程序功能，但它仍然无法正常工作（好像它一开始就没有触发）。
另一部分与组的样式有关。我需要为组应用一些背景颜色，调整组的长度（现在文本不适合，尤其是在较低的屏幕分辨率下）。我没有找到两者的方法。

我发布了所有代码，因为我预计其中会有一些错误。非常感谢任何帮助。

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

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

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

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

Answer 1

1) 没有series.tooltip.formatter这样的选项。仅 series.tooltip.pointFormat 或其他格式。例如：

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

示例：http://jsfiddle.net/TFhd7/367/

2) 我认为这与 Highcharts 2.x 和 4.x 之间的设计更改有关。在 this ticket. And example after setting labels.x to -5: http://jsfiddle.net/TFhd7/368/

中查看更多信息

关于背景-插件不支持，您需要自己渲染该背景。我建议使用 chart.renderer。参见 API。

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

Highcharts (grouped_category styling) and tooltip formatter not working

javascript

scatter

highcharts