reactjs - chart.js 中多个数据集的多个标签

Question

我在 React 中使用 chart.js 来创建折线图。我必须显示日、月和年的数据。一天我有不同的标签和数据，一个月我有不同的标签和数据，而一年我也有不同的标签和数据。我能够添加多个数据集并且工作正常，但是当我尝试添加多个标签时，它不起作用。请帮忙。这是我的代码。

实时代码演示:https://codesandbox.io/s/objective-bird-8owf1

import {Line} from 'react-chartjs-2';

const checkinsData={
    labels:['4 P.M','5 P.M','6 P.M','7 P.M','8 P.M','9 P.M','10 P.M','11 P.M','12 A.M','1 A.M','2 A.M','3 A.M','4 A.M'],
    datasets:[
        {
        label:"Day",
        backgroundColor:"blue",
        borderColor:'#333',
        borderWidth:2,
        lineTension:0.1,
        fill:true,
        data:[4,5,6,7,8,9,10,11,12,1,2,3,4]

        },
        {
            label:"Week",
        backgroundColor:"green",
        borderColor:'#333',
        borderWidth:2,
        lineTension:0.1,
        fill:true,
        labels:['Sun','Mon','Tue','Web','Thu','Fri','Sat'],
        data:[1,2,3,4,5,6,7]
        },
        {
            label:"Month",
        backgroundColor:"red",
        borderColor:'#333',
        borderWidth:2,
        lineTension:0.1,
        fill:true,
        labels:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        data:[1,2,3,4,5,6,7,8,9,10,11,12]
        }


    ]
}

<div className="col-md-8  default-shadow bg-white pd-30-0 border-radius-10 align-center">
                    <Line
                data={checkinsData}
                options={
                    {
                        title:{
                            text:'Total Check-ins',
                            fontSize:20,
                            display:true
                        },
                        legend:{
                            display:true,
                            position:'top'
                        }
                    }
                }
                />
                    </div>

Answer 1

您的 x 轴应该保持不变。所以你不能有超过一种数据。在您的情况下，您希望同时在 x 轴上显示时间、星期几和月份名称，这在单个图形中是不可能的。您可以生成三个图表或通过触发事件(如点击等)在同一个图表上填充不同的数据集。

我的意思是，当点击日期按钮时，当天的数据集将填充标签，'4 P.M','5 P.M','6 P.M' ，当点击月份时，应该填充带有标签'jan'，'feb'等的月份数据集