Question

我正在使用highcharts，我想自定义工具提示。我的工具提示应该显示reqName和reqVersion，但是当前工具提示显示了＆＃39; tipValue＆＃39;的所有值。阵列。

当我将鼠标悬停在列上时，它会在每列上显示工具提示为（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 ;
                    }

...
});
}

Answer 1

试试这个。

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系列中的数据源。您将在包含在this.point对象中的工具提示的格式化程序方法中传递对象。

Answer 2

我设法通过更改工具提示格式化来解决这个问题。首先找到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 ;

高清工具提示自定义

2 个答案: