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

3bygqnnd  于 2023-10-18  发布在  Chart.js
关注(0)|答案(3)|浏览(132)

我在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>
j8ag8udp

j8ag8udp1#

x轴应该是恒定的。所以你不能有一种以上的数据。在你的例子中,你想在x轴上同时显示时间、星期和月份,这在单个图形中是不可能的。您可以生成三个图表,也可以通过触发事件(如单击等)在同一图表上填充不同的数据集。
我的意思是,当天按钮被点击,数据集的一天将填充标签,'下午4点','下午5点','下午6点',当月被点击,数据集的一个月与**标签'一月','二月'**等应填充

2cmtqfgy

2cmtqfgy2#

下面是下面问题的工作代码。我使用了一个标签集,并更新它的按钮点击。同样,我更新了数据集。

import React from 'react';

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]

        }

    ]
}



class CheckinGraph extends React.Component{
    constructor(props)
    {
        super(props)
        this.state={
            key: Date.now()

        }
        this.setDayData=this.setDayData.bind(this);
        this.setWeekData=this.setWeekData.bind(this);
        this.setMonthData=this.setMonthData.bind(this);
    }

    setDayData=function() {
        checkinsData.datasets.backgroundColor="blue";
        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'];
        checkinsData.datasets[0].data=[4,5,6,7,8,9,10,11,12,1,2,3,4];

        this.setState({ key: Date.now() });

    }
    setWeekData=function()
    {
        checkinsData.datasets.backgroundColor="green";
        checkinsData.labels=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
        checkinsData.datasets[0].data=[40,50,16,18,80,29,10];

        this.setState({ key: Date.now() });
    }
    setMonthData=function()
    {
        checkinsData.datasets.backgroundColor="purple";
        checkinsData.labels=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
        checkinsData.datasets[0].data=[100,120,200,256,560,178,280,190,370,100,300,200];

        this.setState({ key: Date.now() });
    }

    render()
    {
        return(
            <div className="col-md-12  default-shadow bg-white pd-30-0 border-radius-10 align-center">
                <ul className="list list-inline graph-label-list">
                    <li className="list-inline-item" onClick={this.setDayData}>
                        Day
                    </li>
                    <li className="list-inline-item" onClick={this.setWeekData}>
                        Week
                    </li>
                    <li className="list-inline-item" onClick={this.setMonthData}>
                        Month
                    </li>

                </ul>

            <Line
            redraw
        data={checkinsData}
        options={
            {
                title:{
                    display:false
                },
                legend:{
                    display:false
                }

            }
        }
        />
            </div>

        )
    }
}

export default CheckinGraph;
unftdfkk

unftdfkk3#

您错误地列出了“Jun”,请在使用引号时保持一致。只要把“君”改成“君”,一切就都正常了。
奖金,请查找一些编码风格:
谷歌JavaScript风格指南,Airbnb JavaScript风格指南等。

相关问题