获取按月显示的x轴标签和按日显示的数据js

时间:2020-10-27 23:55:20

标签: reactjs chart.js

我正在尝试按月显示带有x轴标签的数据。我目前有这个:

enter image description here

我希望我的数据按天显示,而没有两个重复的2020年8月值,而只能显示一个2020年8月值。

enter image description here

此图的问题在于它显示了重复的2020年8月x轴标签,我只想要一个。

有什么方法可以删除重复的值并保持一个2020年8月的值?我尝试从显示格式中删除DD,但随后它像第一个图像一样堆积,这是我不想要的。当我添加DD时,可以按天显示正确的数据

这是我创建的MVP,显示了八月的重复值...。感谢您的帮助!

https://codesandbox.io/s/floral-mountain-k7h1s?fontsize=14&hidenavigation=1&theme=dark

代码:

折线图:

 <Line
data={test}
options={{
  title: {
    display: true,
    text: "Created vs Resolved"
  },
  legend: {
    display: true
  },
  scales: {
    xAxes: [
      {
        bounds: "ticks",
        source: "auto",
        maxTicksLimit: 3,

        type: "time",
        time: {
          parser: "YYYY-MM",
          unit: "month",
          displayFormats: {
            month: "MMM-YYYY"
          }
        }
      }
    ]
  }
}}

/>

数据:

const test = {


    labels: time_stamp,
    datasets: [
      {
        label: 'Created',
        fill: 'start',
        borderColor:
          '#DD1525',
        backgroundColor:
          '#C05F4E',
        pointBackgroundColor:
          '#DF1726',
        data: yAxisCreatedIssues,
      },
      {
        label: 'Resolved',
        borderColor:
          '#49B144',
        backgroundColor: "#ffff",
        pointBackgroundColor:
          '#49B144',
        data: ['resolvedNumber'],

      }
    ],
  }

0 个答案:

没有答案