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

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

执行此操作的代码是（react-c3js）：

someColor
}}
网格={{
x:{
线路：[
{值：'1332'，文本：'mean'}，
{值：d3.mean（dataForHistogram），文本：'median'}，
]
},
y:{
线路：[
{值：100，文本：'oiweryoqeiuw'}，
]
}
}}
轴心={{
x:{
对,，
显示：功能？对：错，
类别，
类型：“类别”，
标签：someLabel，
}
}} />

请注意，

1332

不是实际平均值-正确的平均值是

2092

。但这不是类别值，因此当我使用平均值作为线的值时，线不会显示

---

我怎样才能在这样的条形图上画一条代表平均值的线呢？

有人给了我以下的解决方案，它对我很有效。解决方案是将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,
    }
  }} />)

const categories=[1,2,3,4,5]；
常量Y值=[10,8,6,3,7]；
const xDataName='my-x-data'；
常数数据={
栏目：[
[xDataName，…类别]，
[yData1，…Y值]，
],
};
返回（someColor）
}}
网格={{
线路：{
正面：对
},
x:{
线路：[
{value:d3.mean（yvalue），文本：'mean'}，
]
}
}}
轴心={{
x:{
对,，
显示：功能？对：错，
类别，
类型：“线性”，
标签：someLabel，
}
}} />)

您需要从头开始在d3中使用此条形图吗？因为在c3中，目前该设施没有available@ChandrakantThakkar：我更喜欢c3，而不是d3。谢谢。如果您能够可靠地知道px中的位置，您可以在C3图表上添加一条SVG线。另外，我看到C3有一个称为“区域”的功能，通过它可以显示垂直线或水平线。你能在图表上加一个折线图并使用一个区域吗？我对C3有点陌生，所以不知道两者是否有用。我有一个想法-你能把data.columns作为JSON发布吗？这样我就可以看到起点了？@VanquishedWombat:谢谢你的关注。我找到了一个解决方案，并将发布它。

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,
    }
  }} />)