如何在 highchart 的 Gauge 图表中为不同的箭头制作不同的标签

Question

我在我的应用程序中使用 highChart 进行数据操作，我正在使用 highChart。所以我的要求是我将在 Gauge Chart 中为数据设置不同的值和标签，例如我有 3 个产品和三个标签 them.Lets say Search,staffing,RPO.And Search 的值为 30，staffing 的值为 40，RPO 的值为 67.So 我能够在图表中显示三个值，我也有三个箭头表示三个 products.But 问题是我无法显示三个产品名称 arrows.I 我正在发布我的代码和屏幕截图。

function createAvarageTTFChart(array,region){
   var arrTTF = [];
    for(var i=0; i<array.length; i++){
    searchResultArray = array[i].split("$$##$$##");   
        arrTTF.push( [ searchResultArray[0], parseFloat(searchResultArray[1])] );       
    }    

   $(function () {

        $('.containerForDiagram3').highcharts({

            chart: {
                type: 'gauge',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },
            title: {
                text: 'Average TTF By Product'
            }, subtitle: {
                text: region
            },
            pane: {
                startAngle: -150,
                endAngle: 150,
                background: [{
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                            [0, '#FFF'],
                            [1, '#333']
                        ]
                    },
                    borderWidth: 0,
                    outerRadius: '109%'
                }, {
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                            [0, '#333'],
                            [1, '#FFF']
                        ]
                    },
                    borderWidth: 1,
                    outerRadius: '107%'
                }, {
                    // default background
                }, {
                    backgroundColor: '#DDD',
                    borderWidth: 0,
                    outerRadius: '105%',
                    innerRadius: '103%'
                }]
            },
            // the value axis
            yAxis: {
                min: 0,
                max: 200,
                minorTickInterval: 'auto',
                minorTickWidth: 1,
                minorTickLength: 10,
                minorTickPosition: 'inside',
                minorTickColor: '#666',
                tickPixelInterval: 30,
                tickWidth: 2,
                tickPosition: 'inside',
                tickLength: 10,
                tickColor: '#666',
                labels: {
                    step: 2,
                    rotation: 'auto'
                },
                title: {
                    text: 'Avg. TTF'
                },
                plotBands: [{
                    from: 0,
                    to: 120,
                    color: '#55BF3B' // green
                }, {
                    from: 120,
                    to: 160,
                    color: '#DDDF0D' // yellow
                }, {
                    from: 160,
                    to: 200,
                    color: '#DF5353' // red
                }]
            },

            series: [{
                name: 'PRODUCT', //here i have to show product name dynamically
                data: arrTTF,
                tooltip: {
                    valueSuffix: 'Days'
                }
            }]
        },

            function (chart) {
                if (!chart.renderer.forExport) {
                    setInterval(function () {
                        var point = chart.series[0].points[0],
                            newVal,                            
                        newVal = point.y ;
                        if (newVal < 0 || newVal >200) {
                            newVal = point.y ;
                        }               
                    }, 3000);
                }
            });
    });
   }

当我将鼠标悬停在箭头上时，将显示相应的产品名称。！

 arrTTF.push( [ searchResultArray[0], parseFloat(searchResultArray[1])] );

searchResultArray[0] 包含标签名称 searchResultArray1 包含值。
enter image description here

当我将鼠标悬停在箭头上时，不同的产品名称将是 shown.Somebody 请帮忙。

Answer 1

您可以使用 tooltip.formatter 来管理工具提示。它需要一个函数和 returns 您打算在每个点的工具提示上显示的内容：

tooltip: {
        formatter: function() {

            var i = 0, j, y = this.y;               

            arrTTF.forEach(function (TTF) {

                if(TTF == y)
                {
                    j = i;
                    return;
                }

                i++;
            });                               

            return arrLabel[j] + ": " + y + ' km/h';
        }
}

我检查了 arrTTF 上的每个点并得到了该点的索引并用它在 [=13= 上得到相同的索引]。这是 DEMO.

如何在 highchart 的 Gauge 图表中为不同的箭头制作不同的标签

how to make different label for different arrows in Gauge chart in highchart

javascript

jquery

highcharts