ChartJS无序显示随机数据点

baubqpgj  于 2023-11-18  发布在  Chart.js
关注(0)|答案(1)|浏览(177)

我正在使用ChartJS 4构建一个简单的时间日历图表,其中包含两个数据集,每个数据点Map到一个时间点。ChartJS在大多数情况下都能很好地提取数据/日期Map,但是看起来很随机,数据点是按顺序显示的。
Screengrab of chart with datapoint out of place
数据是按日期顺序提供的,所以我排除了数据是按顺序提供的:

var graphDataDt = [{ x:'14-11-2023', y:'92'},{ x:'13-11-2023', y:'96'},{ x:'12-11-2023', y:'86'},{ x:'11-11-2023', y:'94'},{ x:'10-11-2023', y:'98'},{ x:'09-11-2023', y:'96'},{ x:'08-11-2023', y:'95'},{ x:'07-11-2023', y:'63'},{ x:'30-10-2023', y:'76'},{ x:'29-10-2023', y:'96'},{ x:'28-10-2023', y:'94'},{ x:'27-10-2023', y:'90'},{ x:'26-10-2023', y:'78'},{ x:'25-10-2023', y:'82'},{ x:'24-10-2023', y:'73'},{ x:'23-10-2023', y:'83'},{ x:'22-10-2023', y:'94'},{ x:'21-10-2023', y:'74'},{ x:'20-10-2023', y:'73'},{ x:'19-10-2023', y:'86'},{ x:'18-10-2023', y:'89'},{ x:'17-10-2023', y:'95'},{ x:'16-10-2023', y:'72'},{ x:'15-10-2023', y:'84'},{ x:'14-10-2023', y:'91'},{ x:'13-10-2023', y:'92'},{ x:'12-10-2023', y:'96'},{ x:'11-10-2023', y:'92'},{ x:'10-10-2023', y:'73'},{ x:'09-10-2023', y:'86'},{ x:'08-10-2023', y:'90'},{ x:'07-10-2023', y:'77'},{ x:'06-10-2023', y:'89'},{ x:'05-10-2023', y:'92'},{ x:'04-10-2023', y:'81'},{ x:'04-10-2023', y:'94'},{ x:'04-10-2023', y:'78'},{ x:'03-10-2023', y:'92'},{ x:'02-10-2023', y:'76'},{ x:'01-10-2023', y:'88'},{ x:'30-09-2023', y:'94'},{ x:'29-09-2023', y:'94'},{ x:'28-09-2023', y:'86'},{ x:'27-09-2023', y:'87'},{ x:'26-09-2023', y:'84'},{ x:'25-09-2023', y:'85'},{ x:'24-09-2023', y:'84'},{ x:'22-09-2023', y:'83'},{ x:'21-09-2023', y:'79'},{ x:'20-09-2023', y:'93'},];

var graphDataMt = [{ x:'14-11-2023', y:'79'},{ x:'13-11-2023', y:'63'},{ x:'12-11-2023', y:'83'},{ x:'11-11-2023', y:'81'},{ x:'09-11-2023', y:'81'},{ x:'08-11-2023', y:'78'},{ x:'07-11-2023', y:'73'},{ x:'30-10-2023', y:'81'},{ x:'29-10-2023', y:'90'},{ x:'28-10-2023', y:'83'},{ x:'27-10-2023', y:'84'},{ x:'26-10-2023', y:'65'},{ x:'25-10-2023', y:'74'},{ x:'24-10-2023', y:'77'},{ x:'23-10-2023', y:'68'},{ x:'22-10-2023', y:'85'},{ x:'21-10-2023', y:'83'},{ x:'20-10-2023', y:'63'},{ x:'19-10-2023', y:'67'},{ x:'18-10-2023', y:'76'},{ x:'17-10-2023', y:'73'},{ x:'16-10-2023', y:'70'},{ x:'15-10-2023', y:'70'},{ x:'14-10-2023', y:'83'},{ x:'13-10-2023', y:'66'},{ x:'12-10-2023', y:'80'},{ x:'11-10-2023', y:'67'},{ x:'10-10-2023', y:'80'},{ x:'09-10-2023', y:'73'},{ x:'08-10-2023', y:'80'},{ x:'07-10-2023', y:'78'},{ x:'06-10-2023', y:'68'},{ x:'05-10-2023', y:'72'},{ x:'04-10-2023', y:'73'},{ x:'04-10-2023', y:'57'},{ x:'04-10-2023', y:'57'},{ x:'03-10-2023', y:'65'},{ x:'02-10-2023', y:'69'},{ x:'01-10-2023', y:'77'},{ x:'30-09-2023', y:'70'},{ x:'29-09-2023', y:'68'},{ x:'28-09-2023', y:'76'},{ x:'27-09-2023', y:'74'},{ x:'26-09-2023', y:'76'},{ x:'25-09-2023', y:'68'},{ x:'24-09-2023', y:'69'},{ x:'23-09-2023', y:'84'},{ x:'22-09-2023', y:'66'},{ x:'21-09-2023', y:'82'},{ x:'20-09-2023', y:'84'},];

字符串
这是我剩下的代码

new Chart(speedBracketsMM, {
    type: 'line',
    data: {

      datasets: [{
        pointRadius: 0,
        label: 'Mobile',
        data: graphDataMt,
        backgroundColor: '#FF0000',
        borderWidth: 1,
        borderColor:'#990000',
        tension: 0.1
        },
        {
        pointRadius: 0,
        label: 'Desktop',
        data: graphDataDt,
        backgroundColor: '#FFBF00',
        borderWidth: 1,
        borderColor:'#8f6b00',
        tension: 0.1
        }
        ]
    },
    options: {
    plugins: {
        title: {
            display: true,
            text: 'Performance Scores',
            font: {
                        size: 16
                    }
            },
        legend: {
            position: 'bottom',
            labels:{
            usePointStyle: true,
            pointStyle: 'cirlce',
        }
      }
    },
    scales: {
      x: {
          },
      y: {
        title: {
          display: true,
          text: 'Pages'
        }
      }
    }
  },
    
  });


我就是想不通。在这个例子中,它是一个数据点,在其他例子中,它是3个或4个,但在所有情况下,数据都是按数据顺序提供的。
任何想法都将受到极大的赞赏。
我试着将我的代码分解为一个基本的ChartJS示例,设置各种日期刻度选项并使用基本数据。

EDIT/SOLUTION日期库/适配器似乎不太满意(不知道为什么)。我已经更新了它,使用fns适配器,将我的日期值更改为UNIX时间戳,现在一切似乎都很满意,没有任何额外的x轴变量。

2guxujil

2guxujil1#

请尝试设置x轴,以便以您提供的格式专门解析“time”。例如:

scales: {
  x: {
    type: 'time',
    time: {
      parser: 'DD-MM-YYYY',
      tooltipFormat: 'll'
    },
    title: {
      display: true,
      text: 'Date'
    },
    ticks: {
      source: 'auto'
    }
  },
  y: {
    // ... your existing y-axis configuration
  }
}

字符串

相关问题