c3.js

Question

我有一个包含 4 个数据集的 c3.js 图表。是否可以设置tooltop只显示一组数据？

在下面的代码中，我只想为 data4 显示工具提示。

var chart = c3.generate({
    bindto: '#chart3',
    data: {
      //x: 'x1',
      xFormat: '%d/%m/%Y %H:%M', // how the date is parsed
      xs: {
            'data1': 'x1',
            'data2': 'x2',
            'data3': 'x3',
            'data4': 'x4'
      },      
      columns: [
        x1data,
        y1data,
        x2data,
        y2data,  
        x3data,
        y3data,
        x4data,
        y4data,          
      ],
      types: {
        data1: 'area',
      }, 
    },
    legend: {
        show: false
    }   

});

show:false 有工具提示选项，但会禁用所有选项。它可以只显示 1 个数据集吗？

Answer 1

tooltip.position() 函数可用于控制工具提示的位置，我们可以将工具提示位置设置为远离 canvas 作为快速隐藏它的方法不想看到它。但是，我不知道如何 return 未记录的默认值 - 也许其他人可以详细说明。

  tooltip: {
    grouped: false,
    position: (data, width, height, element) => {
      if (data[0].id === 'data2'){    // <- change this value to suit your needs
          return { top: 40, left: 0 };
      }
      return { top: -1000, left: 0 };
    }
  }

编辑：在寻找解决方案后，我发现 Billboard.js（github 上 C3.js 的一个分支）提供了一个 tooltip.onshow() 函数，API 文档说是 'a callback that will be invoked before the tooltip is shown'。所以看起来 Billboard.js 已经有了一个潜在的解决方案，您可以在其中拦截数据并隐藏工具提示。

c3.js - 隐藏特定数据集的工具提示

c3.js - hide tooltip for specific data sets

charts

d3.js