show date in( MM-DD) format in x-axis using react-vis

牧云@^-^@ 提交于 2019-12-11 03:08:18

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!