How to build a time x-axis where it starts on Monday and ends on Sunday for scatter plot in chartJS?

风格不统一 提交于 2020-07-23 06:48:06

问题


I am building a scatter plot using chartJS and react-chartjs-2. I am getting time in this format 2020-07-06T09:17:15.424+00:00 for x-axis and simple floats for y-axis. However I would only like to map data on x-axis based on the day of the week and the time.

I have written this for data right now. For the data should the x-axis data be a string or a moment object in order to display data on the weekdays? What kind of data do I need to pass to only show where the point stands in a week?

export const waitingChart = {
    type: 'scatter',
    datasets: [{
        backgroundColor: 'rgba(75,192,192,1)',
        borderColor: 'rgba(0,0,0,1)',
        data: [],
        label: 'Waiting Time'
    }],
    options: {
        scales: {
            xAxes:[{
                type: 'time',
                time: {
                    parser: 'HH:mm',
                    unit: 'hour',
                    stepSize: 1,
                    displayFormats: {
                      hour: 'HH:mm'   
                    },          
                    tooltipFormat: 'HH:mm'          
                  },
                  ticks: {
                    min: '00:00',
                    max: '24:00',
                    callback: (value, index) => index == 24 ? '24:00' : value
                  }
}],

            yAxes: [{
                scaleLabel: {
                    labelString: 'waiting time in minutes',
                    display: true
                }
            }]
        },
        }
    
};

来源:https://stackoverflow.com/questions/62874284/how-to-build-a-time-x-axis-where-it-starts-on-monday-and-ends-on-sunday-for-scat

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