javascript - 无法从 React vis 图中删除条形之间的间隙

Question

我有以下内容：

<XYPlot xType="ordinal" width={300} height={300} xDistance={0}>
    <VerticalGridLines />
    <HorizontalGridLines />
    <XAxis />
    <VerticalBarSeries className="vertical-bar-series-example" data={greenData} />
    <LabelSeries data={labelData} getLabel={d => d.y} />
</XYPlot>

和一些像这样的模拟数据：

const greenData = [
    {x: 34, y: 200},
    {x: 35, y: 220},
    {x: 36, y: 240},
    {x: 37, y: 260},
    {x: 38, y: 280},
    {x: 39, y: 300}
];

const labelData = greenData.map((d, idx) => ({
  x: Math.max(greenData[idx].x),
  y: d.y
}));

但是我找不到消除条形之间间隙的解决方案：

Answer 1

问题是您正在使用VerticalBarSeries将生成条形图（每个条之间有间距）。如果您正在寻找直方图，则每个条形之间没有间距。您需要使用VerticalRectSeries来创建直方图。

直方图文档

<XYPlot xType="ordinal" width={300} height={300}>
    <VerticalGridLines />
    <HorizontalGridLines />
    <XAxis />
    <VerticalRectSeries className="vertical-bar-series-example" data={greenData} />
    <LabelSeries data={labelData} getLabel={d => d.y} />
</XYPlot>