отображать дату в формате (MM-DD) по оси X с использованием команды - PullRequest
Новая
       37

отображать дату в формате (MM-DD) по оси X с использованием команды

2 голосов
/ 08 мая 2019

Я пытаюсь реализовать реакцию в моем проекте.Мне нужно показать данные на основе даты.Я использую tickFormat для него, но он показывает одну и ту же дату два раза по оси X. Я добавляю несколько строк своего кода здесь. 

       <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 Ответ

1 голос
/ 19 июня 2019

Если вы укажете xType как ordinal, он будет использовать ваше значение x в качестве метки тика (например, как гистограмма).Таким образом, вам не нужно иметь избыточное преобразование ваших значений x, используя 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>
...