c3.js - xgrid行上的工具提示

// 引入c3.js库和相关依赖文件
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>

// 创建一个包含数据的HTML元素
<div id="chart"></div>

// 使用c3.generate函数创建图表实例
var chart = c3.generate({
  bindto: '#chart',
  data: {
    x: 'x',
    columns: [
      ['x', '2022-01-01', '2022-02-01', '2022-03-01'],
      ['data1', 30, 200, 100]
    ]
  },
  axis: {
    x: {
      type: 'timeseries',
      tick: {
        format: '%Y-%m-%d'
      }
    }
  },
  tooltip: {
    enabled: true,
    format: {
      title: function (x) {
        return 'Date: ' + x;
      },
      value: function (value) {
        return 'Value: ' + value;
      }
    },
    position: function (data, width, height, element) {
      var chartOffsetX = document.getElementById('chart').offsetLeft;
      var chartOffsetY = document.getElementById('chart').offsetTop;
      var x = parseInt(element.getAttribute('x'));
      var y = parseInt(element.getAttribute('y'));
      return { top: y + chartOffsetY, left: x + chartOffsetX };
    }
  }
});

// 加载数据并显示图表
chart.load({
  columns: [
    ['x', '2022-04-01', '2022-05-01', '2022-06-01'],
    ['data1', 150, 50, 250]
  ]
});