Javascript x轴上的格式化日期
我正在尝试显示基于此数据集的折线图:Javascript x轴上的格式化日期,javascript,reactjs,react-vis,Javascript,Reactjs,React Vis,我正在尝试显示基于此数据集的折线图: [ { x: new Date(2018, 1, 1), y: 0 }, { x: new Date(2018, 2, 1), y: 50 }, { x: new Date(2018, 3, 1), y: 150 }, { x: new Date(2018, 4, 1), y: 200 }, { x: new Date(2018, 5, 1), y: 340 }, { x: new Date(2018, 6, 1), y: 490 }
[
{ x: new Date(2018, 1, 1), y: 0 },
{ x: new Date(2018, 2, 1), y: 50 },
{ x: new Date(2018, 3, 1), y: 150 },
{ x: new Date(2018, 4, 1), y: 200 },
{ x: new Date(2018, 5, 1), y: 340 },
{ x: new Date(2018, 6, 1), y: 490 },
{ x: new Date(2018, 7, 1), y: 590 },
{ x: new Date(2018, 8, 1), y: 700 },
{ x: new Date(2018, 9, 1), y: 1230 },
{ x: new Date(2018, 10, 1), y: 900 },
]
我的问题是:
x轴标签重复4次,因此每个刻度显示4次:feb,feb,feb,mar,mar,mar…
更新: 删除日期的格式显示“react vis”为每周(2月4日、2月11日、2月18日、2月25日、3月4日、3月11日……)显示一个勾号,但数据有一个月间隔 如何使x轴跟随数据?
这是我的代码:
<FlexibleWidthXYPlot height={300} xType="time">
<XAxis
// tslint:disable-next-line jsx-no-lambda
tickFormat={(d: Date) => formatDate(d, { rawFormat: 'MMM' })}
tickLabelAngle={-45}
// xDomain={[new Date(data[0].x), new Date(data[data.length - 1].x)]}
// xRange={[0, 9]}
// tickValues={[0, 9]}
/>
<YAxis />
<HorizontalGridLines />
<AreaSeries
data={data}
opacity={0.25}
fill="#556887"
stroke="#556887"
// tslint:disable-next-line jsx-no-lambda
onNearestXY={(value: any) => {
this.setState({ tooltipValue: value })
}}
curve={curveName}
/>
<LineMarkSeries data={data} stroke="#556887" fill="#556887" strokeWidth={3} size={3} curve={curveName} />
</FlexibleWidthXYPlot>
我想知道是否有一种更优雅/更“正确”的方法来控制x轴滴答声的间隔
<XAxis
// tslint:disable-next-line jsx-no-lambda
tickFormat={(d: Date) => formatDate(d, { rawFormat: 'MMM' })}
tickLabelAngle={-45}
totalTicks={data.length}
...
/>