javascript - 如何为highchart中的仪表图表中的不同箭头制作不同的标签

Question

我在我的应用程序中使用 highChart 进行数据操作，我正在使用 highChart 。所以我的要求是我在仪表图中的数据有不同的值和标签，例如我有 3 个产品以及它们的三个标签。让我们说搜索，人员配备，RPO。搜索的值为 30，人员配备为 40，RPO 为 67。所以我能够在图表中显示三个值，而且我对三种产品有三个箭头。但问题是我不是能够显示三个箭头的三个产品名称。我正在发布我的代码以及屏幕截图。

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] 包含标签名称 searchResultArray 1包含值。
enter image description here

当我将鼠标悬停在箭头上时，将显示不同的产品名称。请有人帮忙。

Answer 1

您可以使用tooltip.formatter来管理工具提示。它需要一个函数并返回您想要在每个点的工具提示上显示的内容:

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 上的每个点并获取了该点的索引，并使用它在 arrLabel 上获取了相同的索引。这是DEMO .