在Chartist时间线中自定义工具提示

Question

我有一个使用chartist.js的时间表，我使用的是chartist工具提示插件

默认情况下，当您在点上悬停时，工具提示会同时显示x值和y值。

如何自定义工具提示文本，以便只显示y值？

Chartist工具提示插件

var defaultOptions = {
  currency: undefined, //accepts '£', '$', '€', etc.
  // e.g. 4000 => €4,000
  tooltipFnc: undefined, //accepts function
  // build custom tooltip
  transformTooltipTextFnc: undefined, // accepts function
  // transform tooltip text
  class: undefined, // accecpts 'class1', 'class1 class2', etc.
  // adds class(es) to tooltip wrapper
  anchorToPoint: false, //accepts true or false
  // tooltips do not follow mouse movement -- they are anchored to the point / bar.
  appendToBody: false //accepts true or false
  // appends tooltips to body instead of chart container
};

从插件文档中可以看出，transformTooltipTextFnc是我想要的，但我不知道如何使用它只显示'y‘值。

码

var data = {
  series: [
    {
      name: 'series-1',
      meta: 'series-1',
      data: [
        {x: new Date(143134652600), y: 53},
        {x: new Date(143234652600), y: 40},
        {x: new Date(143340052600), y: 45},        
      ]
    },
    {
      name: 'series-2',
      meta: 'series-2',
      data: [
        {x: new Date(143134652600), y: 53},
        {x: new Date(143234652600), y: 35},
      ]
    }
  ]
};

var options = {
  fullwidth: true,
  height: 300,
  axisX: {
      type: Chartist.FixedScaleAxis,
      divisor: 6,
      labelInterpolationFnc: function (value) {
         return moment(value).format('MMM D');
     }
  },
  plugins: [
    Chartist.plugins.tooltip()
  ]
};

new Chartist.Line('#chart1', data, options);

Answer 1

transformTooltipTextFnc函数接收一个字符串参数，其中包含由逗号分隔的X值和Y值。您可以使用字符串拆分方法返回一个Array，其X值位于索引0，Y值位于索引1。

因此，在插件数组中有Chartist.plugins.tooltip()的地方，替换为：

Chartist.plugins.tooltip({
  transformTooltipTextFnc: function(tooltip) {
    var xy = tooltip.split(",");
    return xy[1];
  }
})

这也是一个执行其他操作的机会。例如，如果您想使用Unicode减号而不是默认的连字符-减号：

var xy = tooltip.split(",");
return xy[1].replace("-", "\u2212");

如果要将某些单位添加到数字中，例如，如果数字是以摄氏度为单位的温度：

var xy = tooltip.split(",");
return xy[1] + "\u00B0C";