无法从 React vis 图中删除条之间的间隙答案

【问题标题】：cannot remove gap between bars from React vis graph无法从 React vis 图中删除条之间的间隙
【发布时间】：2019-08-13 12:37:27
【问题描述】：

我有以下：

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

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

【问题讨论】：

标签： javascript reactjs react-vis

【解决方案1】：

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

histograms documentation

<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>

【讨论】：