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

Question

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

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

如何做到这一点？

Answer 1

只需在 .c3-xgrid-focus class 中覆盖以下 css 属性:-

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

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

Answer 2

point: {
 show: false
},

隐藏点为假，显示点为真

注意：确保在加载数据后将其与 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
  }
});

Answer 3

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

Answer 4

根据 Bonifatius 的评论，您应该通过编辑图表选项来隐藏它们。

{
    tooltip: {
        show: false
    }
}

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

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

c3.js how to remove line with tooltip?

c3.js