Как изменить день начала недели на графике? (сюжетно. js) - PullRequest
0 голосов
/ 09 мая 2020

Как изменить день начала недели на графике? Теперь у меня только воскресенье на оси x. Мне нужно отображать только понедельники по оси x. Спасибо. Моя сюжетная конфигурация:

...
xaxis: {
    type: 'date',
    automargin: true,
    tickformat: '%d.%m',
    maxPadding: 1,
},
yaxis: {
    tickmode: 'array',
    automargin: true,
    showticklabels: false,
    showgrid: false,
},
...

1 Ответ

0 голосов
/ 10 мая 2020

Я клонировал их репо и использовал ваш массив данных. Как я уже упоминал в своих заметках, это просто вопрос форматирования того, что вы кормите своей оси x /, я использовал момент в моем примере ниже, я уверен, что вы можете использовать другие способы получить желаемый формат даты.

дайте мне знать, если что-то в приведенном ниже коде нуждается в дополнительных разъяснениях. Кстати. Я использую реактивную версию, но на первый взгляд они обе выглядели одинаково.

      const PlotlyClass = (props) => {
  let VasilyBasicArray = [{ value: "2020-04-16", count: 100 }, { value: "2020-04-17", count: 200 }, { value: "2020-04-18", count: 300 }, { value: "2020-04-19", count: 400 }, { value: "2020-04-20", count: 500 }, { value: "2020-04-21", count: 600 }, { value: "2020-04-22", count: 700 }, { value: "2020-04-23", count: 800 }, { value: "2020-04-24", count: 100 }, { value: "2020-04-25", count: 200 }, { value: "2020-04-26", count: 300 }, { value: "2020-04-27", count: 400 }, { value: "2020-04-28", count: 500 }, { value: "2020-04-29", count: 600 }, { value: "2020-04-30", count: 700 }]


 return (
<Plot
  data={[
    {
      x: VasilyBasicArray.map(rec => moment(rec.value).format('dd-Do')),
      y: VasilyBasicArray.map(rec => rec.count),
      type: 'scatter',
      mode: 'lines+markers',
      marker: { color: 'red' },
    },
    { type: 'bar', x: VasilyBasicArray.map(rec => moment(rec.value).format('dd-Do')), y: VasilyBasicArray.map(rec => rec.count) },
  ]}
  layout={{ width: 320, height: 240, title: 'A Fancy Plot' }}
/>
  );
};

enter image description here

...