highcharts 迷你图中有两个不同的工具提示

Question

我正在使用迷你图，但我有两个不同的迷你图：一个是公司的季度利润（欧元），另一个是当前年份与之前的差异，并以百分比（%）显示。

显示代码：

    
Highcharts.SparkLine = function(a, b, c) {
  var hasRenderToArg = typeof a === 'string' || a.nodeName,
    options = arguments[hasRenderToArg ? 1 : 0],
    defaultOptions = {
      chart: {
        renderTo: (options.chart && options.chart.renderTo) || this,
        backgroundColor: null,
        borderWidth: 0,
        type: 'bar',
        margin: [2, 0, 2, 0],
        width: 120,
        height: 20,
        style: {
          overflow: 'visible'
        },

        // small optimalization, saves 1-2 ms each sparkline
        skipClone: true
      },
      title: {
        text: ''
      },
      credits: {
        enabled: false
      },
      xAxis: {
        labels: {
          enabled: false
        },
        title: {
          text: null
        },
        startOnTick: false,
        endOnTick: false,
        tickPositions: []
      },
      yAxis: {
        endOnTick: false,
        startOnTick: false,
          min: -200,
            max: 200,
        labels: {
          enabled: false
        },
        title: {
          text: null
        },
        tickPositions: [0]
      },
      legend: {
        enabled: false
      },
      tooltip: {
        hideDelay: 0,
        outside: true,
        shared: true
      },
      plotOptions: {
        series: {
          animation: false,
          lineWidth: 1,
          shadow: false,
          states: {
            hover: {
              lineWidth: 1
            }
          },
          marker: {
            radius: 1,
            states: {
              hover: {
                radius: 2
              }
            }
          },
          fillOpacity: 0.25
        },
        column: {
          negativeColor: '#910000',
          borderColor: 'silver'
        },
         bar: {
            negativeColor: '#910000',
            borderColor: 'silver',
             tooltip: {
                 
             },
          }
      }
    };

  options = Highcharts.merge(defaultOptions, options);

  return hasRenderToArg ?
    new Highcharts.Chart(a, options, c) :
    new Highcharts.Chart(options, b);
};

var start = +new Date(),
  $tds = $('td[data-sparkline]'),
  fullLen = $tds.length,
  n = 0;

function doChunk() {
  var time = +new Date(),
    i,
    len = $tds.length,
    $td,
    stringdata,
    arr,
    data,
    chart;

  for (i = 0; i < len; i += 1) {
    $td = $($tds[i]);
    stringdata = $td.data('sparkline');
    arr = stringdata.split('; ');
    data = $.map(arr[0].split(', '), parseFloat);
    chart = {};

    if (arr[1]) {
      chart.type = arr[1];
    }
    $td.highcharts('SparkLine', {
      series: [{
        data: data,
        pointStart: 0
      }],
      tooltip: {
        headerFormat: '<span style="font-size: 13px">' + $td.parent().find('th').html() + ', T{point.x}:</span><br/>',
        pointFormat: '<b>{point.y}</b>€'
      },
      chart: chart
    });

    n += 1;
  }
}
doChunk();

[抱歉，我无法通过声誉发布图片。点击链接查看][1]

我的问题是：我认为我的问题是工具提示，它对两个图表使用相同的工具提示，我希望第一个迷你图像现在一样（带有季度和欧元），但第二个，我想向我显示百分比（% ).

有人知道如何解决吗？

谢谢 [1]：

Answer 1

您可以使用

tooltip.formatter()

回调函数根据点、系列或图表信息有条件地显示内容：

tooltip: {
  formatter: function() {
    const point = this,
          type = point.series.type;

    return `
            <span style="font-size: 13px">${td.parentElement.querySelector('th').innerText}, T${point.x}:</span><br/>
            <b>${point.y}</b>${type === "column" ? '€' : '%'}
        `;
  }
}

演示：https://jsfiddle.net/BlackLabel/qdo2fk9c/
API：https://api.highcharts.com/highcharts/tooltip.formatter