Question

我在我的应用程序中使用highChart进行数据操作，我正在使用highChart。所以我的要求是我将在Gauge Chart中为数据设置不同的值和标签，例如我有3个产品，还有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。

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

1 个答案: