highcharts sparkline中的两个不同工具提示

6rqinv9w  于 2023-10-20  发布在  Highcharts
关注(0)|答案(1)|浏览(144)

我正在使用sparkline,但我有两个不同的sparkline图:一个是公司季度利润(EUR),另一个是本年度与前一年度的差额(%)。
显示代码:

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]
我的问题是:我认为我的问题是工具提示,这使用相同的两个图形,我希望第一个Spark线是像现在(季度和欧元),但第二,我想显示我的百分比(%).
有人知道怎么修吗?
感谢[1]:https://i.stack.imgur.com/kDl16.png
如何设置两个Y轴?在我的例子中,我需要一个y轴用于条形线(-200到200),另一个用于列或区域,因为它们是经济值。

yAxis: [{
            endOnTick: false,
            startOnTick: false,
            labels: {
                enabled: false
            },
            title: {
                text: null
            },
            tickPositions: [0],
            min: -100,
            max: 100,      
        }],
x3naxklr

x3naxklr1#

您可以使用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" ? '€' : '%'}
        `;
  }
}

Demohttps://jsfiddle.net/BlackLabel/qdo2fk9c/
APIhttps://api.highcharts.com/highcharts/tooltip.formatter

相关问题