问题
I am trying to implement react-vis in my project. I need to show data based on date. I am using tickFormat for it but it is showing same date two times in x-axis.I am adding few lines of my code here.
<XYPlot
width={1140}
height={440}
>
<LineMarkSeries
lineStyle={{stroke: '#e0e0e0'}}
markStyle={{stroke: '#6dc6c1'}}
style={{
strokeWidth: '2px'
}}
strokeStyle="solid"
data={[
{
x: Date.parse("05/05/2019"),
y: 0
},
{
x: Date.parse("05/12/2019"),
y: 12
},
{
x: Date.parse("05/13/2019"),
y: 16
}
]}
/>
<XAxis
attr="x"
attrAxis="y"
orientation="bottom"
tickFormat={function tickFormat(d){return
moment(d).format("MMM DD")}}
tickLabelAngle={0}
/>
<YAxis />
</XYPlot>
回答1:
If you specify xType
as ordinal
, it will use your x value as the tick label (eg: like a bar chart). Thus, you don't have to have a redundant conversion of your x values using Date.parse
.
<XYPlot
width={1140}
height={440}
xType='ordinal'
>
<LineMarkSeries
lineStyle={{stroke: '#e0e0e0'}}
markStyle={{stroke: '#6dc6c1'}}
style={{ strokeWidth: '2px' }}
strokeStyle="solid"
data={[
{
x: "05/05/2019",
y: 0
},
{
x: "05/12/2019",
y: 12
},
{
x: "05/13/2019",
y: 16
}
]}
/>
<XAxis />
</XYPlot>
来源:https://stackoverflow.com/questions/56040548/show-date-in-mm-dd-format-in-x-axis-using-react-vis