1

我有一个使用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);
4

1 回答 1

4

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

因此，在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";
于 2018-02-19T05:38:21.170 回答