首页 文章

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

提问于
浏览
0

我在我的应用程序中使用highChart进行数据操作,我正在使用highChart . 所以我的要求是我将在Gauge Chart中为数据设置不同的值和标签,例如我有3个产品,还有3个标签 . 让我们说搜索,人员配置,RPO . 和搜索有 Value 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

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

1 回答

  • 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 .

相关问题