高图工具提示自定义

Highchart tooltip customization

本文关键字：自定义 工具提示 高图      更新时间：2023-09-26

我正在使用highcharts，我想自定义工具提示。我的工具提示应该显示reqName和reqVersion，但目前的工具提示显示'tipValue'数组的所有值。

当我将鼠标悬停在列上时，它会在每列上显示工具提示(1.1,1.0,1.2,1.2)

where as I would like the tooltip to show version 
1.1 for column tpReq 
1.0 for column opReq
1.2 for column Rex
1.2 for column tpReq
My xVaue is an array of ['tpReq','opReq','Rex','tpReq']
My yValue is an array of [5,8,5,1]
My tipValue is an array of ['1.1','1.0','1.2','1.2']

下面是我绘制highcharts的函数

function drawchar(myXAxis,myYAxis,myTooltip)
{
   var xValue = JSON.parse(XAxis);
   var yValue = JSON.parse(YAxis);
   var tipValue = JSON.parse(myTooltip);
   var reqTypeChart = new HighCharts.Chart ({
   ...
   ...
     xAxis: {
                    categories: xValue,
                    title: { 'My Requests'
                        text: null
                    },
                },
                ....
                series: [{
                    name: 'Status',
                    data: yValue
                }],
                legend: { enabled: false },
               tooltip: {
                    formatter: function () {
                        return '<b>' + this.xValue + '</b><br/>' +
                                'IssueCount: ' + Highcharts.numberFormat(this.yValue, 0) + '</b><br/>' + 
                                'AppVersion: ' + tipValue ;
                    }
...
});
}

试试这个

function drawchar(myXAxis, myYAxis, myTooltip) {
    var xValue = JSON.parse(myXAxis);
    var yValue = JSON.parse(myYAxis);
    var tipValue = JSON.parse(myTooltip);
    var data = [];
    $.each(xValue, function (index, val) {
        var tempObj = {
            x: val,
            y: yValue[index],
            tipValue: tipValue[index]
        }
        data.push(tempObj);
    });
    // **UPDATED ** 
   data.sort(function(a, b){ 
      if(a.x < b.x) return -1; 
      if(a.x > b.x) return 1; return 0; 
   })
    var reqTypeChart = new HighCharts.Chart({
        xAxis: {
            title: {
                text: 'My Requests'
            }
        },
        series: [
            {
                name: 'Status',
                data: data
            }
        ],
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.point.x + '</b><br/>' +
                    'IssueCount: ' + Highcharts.numberFormat(this.point.y, 0) + '</b><br/>' +
                    'AppVersion: ' + this.point.tipValue;
            }

        }
    });
}

将所有三个值组合成一个对象数组，并将该数组设置为highchart api系列中的数据源。你会在工具提示的formatter方法中得到传递对象。点对象。

我设法通过更改工具提示格式器来解决这个问题。因此，首先找到xValue的索引，并从tipValue数组中找到相应的工具提示值。

formatter: function () {
          var index = xValue.indexOf(this.xValue);
          var tip = tipValue[index];
          return '<b>' + this.xValue + '</b><br/>' +
      'IssueCount: ' + Highcharts.numberFormat(this.yValue, 0) + '</b><br/>' + 
      'AppVersion: ' + tip ;
相关文章：