c3.js如何删除带有工具提示的行？答案

【问题标题】：c3.js how to remove line with tooltip?c3.js如何删除带有工具提示的行？
【发布时间】：2015-06-30 07:31:48
【问题描述】：

我正在使用 c3.js 创建折线图。我想使用工具提示将默认指示线删除到 x 轴。

我尝试了工具提示格式，但该行保持不变。

如何做到这一点？

【问题讨论】：

标签： c3.js

【解决方案1】：

grid:{
  focus:{
    show:false
  }
}

可能在人们回答这个问题的时候没有提供配置参数，但现在你可以通过上面提到的配置来做到这一点。参考http://c3js.org/reference.html#grid-focus-show

下面的示例代码

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    },
    grid:{
        focus:{
        show:false
      }
    }
});

【讨论】：

大家好，我已经尝试使用此配置并且它有效。但问题是，它不再出现在他们的 API 中，有人知道为什么吗？（已弃用、错误删除等）
@GrizzlyMcBear 我试过了，它还在工作。

【解决方案2】：

只需覆盖 .c3-xgrid-focus 类中的以下 css 属性：-

.c3-grid .c3-xgrid-focus { visibility : hidden !important; }

我无法在 api 文档中快速找到关闭此功能的配置参数。

【讨论】：

我认为在 css 中覆盖不是一个好的解决方案，因为 C3 中有很多方法可以为您做到这一点。可以使用 show: false more info @ c3js.org/reference.html 删除工具提示

【解决方案3】：

point: {
 show: false
},

false 隐藏点，true 显示点

注意：确保您将在加载数据后编写此代码，并在 c3 生成函数中进行其他设置

这是一个例子： http://c3js.org/reference.html#point-show

在下面的代码中，我用注释突出显示了代码：

var chart = c3.generate({
  bindto: '#CYCLE_CHART',
  data: {
    columns: [
      ["Cycletime"].concat(objCycle.cData), ["Downtime"].concat(objDowntime.dData), ["StdCycletime"].concat(objStdCycle.stdCData), ["StdLoadunloadtime"].concat(objStdLUtime.stdLUData),
    ],
    type: 'spline',
    types: {
      Cycletime: 'bar',
      Downtime: 'bar'
    },
    names: {
      Cycletime: 'Cycle time',
      Downtime: 'Load time',
      StdCycletime: 'Std Cycle time',
      StdLoadunloadtime: 'Std Load time'

    },
  },
  axis: {
    x: {
      label: {
        text: 'Cycles',
        position: 'outer-center'
      },
      max: 10,
      min: 1,
    },
    y: {
      label: {
        text: 'Seconds',
        position: 'outer-middle'
      },
      max: Y_axis,
      min: 1,
    }
  },

  // Here!
  point: {
    show: false
  },

  tooltip: {
    show: true
  }
});

【讨论】：

【解决方案4】：

根据 BonifatiusK 的评论，您应该通过编辑 chartOptions 来隐藏它们。

{
    tooltip: {
        show: false
    }
}

覆盖 c3 的 CSS 属性不是一个好主意。

【讨论】：