c3js：如何向不是x轴类别之一的垂直条形图添加垂直线？

Question

我已经创建了一些数据的直方图，并希望在该数据的平均值所在的位置显示一条垂直线。我可以在条形图上的任何类别处放置一条线，例如：

执行此操作的代码是 (react-c3js):

<C3Chart
  key={foo}
  data={{ unload: true,
      columns: data.columns,
      type: 'bar',
      color: (color, d) => someColor
  }}
  grid={{
    x: {
      lines: [
        { value: '1332', text: 'mean' },
        { value: d3.mean(dataForHistogram), text: 'median' },
      ]
    },
    y: {
      lines: [
        { value: 100, text: 'oiweryoqeiuw' },
      ]
    }
  }}
  axis={{
    x: {
      unload: true,
      show: features ? true : false,
      categories,
      type: "category",
      label: someLabel,
    }
  }} />

请注意 1332 不是实际平均值 - 正确的平均值是 2092。但这不是类别值，所以当我使用平均值作为线的值时，线不显示。

如何在这样的条形图上放置代表平均值的线？

Answer 1

有人给了我以下解决方案，它对我有用。解决方案是将 x 轴的类型从 category 更改为 linear 并指定 x 数据：

const categories = [1, 2, 3, 4, 5];
const yValues = [10, 8, 6, 3, 7];
const xDataName = 'my-x-data';
const data = {
  columns: [
    [xDataName, ...categories],
    [yData1, ...yValues],
  ],
};

return (<C3Chart
  key={foo}
  data={{
      x: xDataName, 
      unload: true,
      columns: data.columns,
      type: 'bar',
      color: (color, d) => someColor
  }}
  grid={{
    lines: {
      front: true 
    },
    x: {
      lines: [
        { value: d3.mean(yValues), text: 'mean' },
      ]
    }
  }}
  axis={{
    x: {
      unload: true,
      show: features ? true : false,
      categories,
      type: "linear",
      label: someLabel,
    }
  }} />)

c3js：如何向不是x轴类别之一的垂直条形图添加垂直线？

c3js: How to add a vertical line to a vertical bar chart that is not one of the categories of the x-axis?

reactjs

c3.js