Highcharts SparkLine双提示框格式与双Y轴配置咨询

一、为不同类型图表配置对应格式的提示框 #

要区分利润图表（EUR）和差值图表（%）的提示框格式，可按以下步骤修改：

1. 扩展data-sparkline的标识规则：在原有数据、图表类型后增加格式标识（eur或percent），示例HTML结构：

   <!-- 利润柱形图 -->
   <td data-sparkline="120, 150, 90, 200; column; eur"></td>
   <!-- 差值条形图 -->
   <td data-sparkline="15, -5, 20, -10; bar; percent"></td>
   

2. 动态切换提示框格式：在doChunk函数中读取新增标识，根据标识设置对应pointFormat：

   function doChunk() {
     var time = +new Date(),
       i,
       len = $tds.length,
       $td,
       stringdata,
       arr,
       data,
       chart,
       tooltipPointFormat;
   
     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];
       }
   
       // 根据标识匹配提示框格式
       tooltipPointFormat = arr[2] === 'percent' ? '<b>{point.y}%</b>' : '<b>{point.y}</b>€';
   
       $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: tooltipPointFormat
         },
         chart: chart
       });
   
       n += 1;
     }
   }
   

二、配置双Y轴适配不同图表范围 #

要实现双Y轴分别适配-200至200的条形图、经济数值类的柱形/面积图，需修改以下部分：

1. 将默认配置的yAxis改为数组：定义两个独立Y轴，分别设置范围属性：

   defaultOptions = {
     // 其他默认配置不变
     yAxis: [
       {
         // 第一个Y轴：适配条形图，固定范围-200到200
         endOnTick: false,
         startOnTick: false,
         min: -200,
         max: 200,
         labels: { enabled: false },
         title: { text: null },
         tickPositions: [0]
       },
       {
         // 第二个Y轴：适配经济数值图表，自动计算范围
         endOnTick: false,
         startOnTick: false,
         labels: { enabled: false },
         title: { text: null },
         tickPositions: [0]
       }
     ],
     // 其他默认配置不变
   };
   

2. 为不同类型系列指定对应Y轴：在创建图表时，根据图表类型为series设置yAxis索引：

   series: [{
     data: data,
     pointStart: 0,
     yAxis: chart.type === 'bar' ? 0 : 1 // 条形图用第一个Y轴，其他用第二个
   }]
   

修改后的完整代码 #

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'
        },
        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]
        },
        {
          endOnTick: false,
          startOnTick: false,
          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' }
      }
    };

  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,
    tooltipPointFormat;

  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];
    }

    tooltipPointFormat = arr[2] === 'percent' ? '<b>{point.y}%</b>' : '<b>{point.y}</b>€';

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

    n += 1;
  }
}
doChunk();

内容的提问来源于stack exchange，提问作者Dabi